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:
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>
Y el repositorio completo en Github puedes verlo acá:
crisdux
/
ficha-responsive-tailwindcss
Ficha en taildwind css responsive
Ficha con Tailwind css
Descripción:
Ficha básica responsive programada con Tailwindcss.
Top comments (0)