DEV Community

dux
dux

Posted on

Ficha básica responsive con Tailwindcss 📜

Hace pocos días que estoy probando Tailwindcss como framework css para realizar proyectos personales y hasta ahora con lo poco que se estoy más que complacido.

A continuación les comparto un ficha responsive bastante básica que pude hacer, espero les sirva de algo.

La ficha como tal se ve de la siguiente manera:

img

El código del index.html es el siguiente:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/styles.css">
    <title>Document</title>
</head>

<body class="font-overpass-mono">
    <section class="container">
        <div class="min-h-screen bg-gray-200 flex justify-center items-center ">
            <div>
                <div class="gradiente px-8 py-6 rounded-lg space-y-5 max-w-md">
                    <div class="flex items-center space-x-5 sm:flex-col sm:space-y-5 ">
                        <h1 class="uppercase text-3xl font-semibold text-white text-center pl-2
                                    sm:font-bold sm:text-gray-800">
                            Cristian Fernando
                        </h1>
                        <img src="./img/user.svg" alt="user" class="h-40 w-full">
                    </div>
                    <p class="text-center text-gray-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
                        esse perspiciatis ad ullam. Magnam, quibusdam!</p>
                    <div class="flex justify-center">
                        <button class="py-2 px-3 w-full bg-indigo-500 text-white rounded-lg uppercase hover:bg-indigo-600
                        sm:w-40">
                            Ver más
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </section>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Y el repositorio completo en Github puedes verlo acá:

GitHub logo crisdux / ficha-responsive-tailwindcss

Ficha en taildwind css responsive

Ficha con Tailwind css

Descripción:

Ficha básica responsive programada con Tailwindcss.


img

Discussion (0)