Need Feedback
Hello, i started learning tailwind recently and i want to get feddback for better practices or whatever
1 Reply
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/output.css" />
<title>Document</title>
</head>
<body class="flex items-center justify-center h-screen bg-black">
<main
class="flex w-full max-w-4xl min-h-[600px] md:flex-row flex-col-reverse gap-5 md:gap-10 bg-white rounded-3xl overflow-hidden md:p-7"
>
<div class="w-full flex flex-col p-5 md:pt-14 lg:px-7">
<h1 class="text-[39px] lg:text-[47px] font-bold mb-5">Stay updated!</h1>
<p class="font-medium mb-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium
</p>
<ul class="mb-8">
<li><span class="font-medium">Lorem ipsum dolor sit amet.</span></li>
<li><span class="font-medium">Lorem ipsum dolor sit amet.</span></li>
<li><span class="font-medium">Lorem, ipsum dolor.</span></li>
</ul>
<input
type="text"
placeholder="email@company.com"
class="border-2 rounded-lg py-4 px-6 mb-6 font-medium text-gray-300 placeholder:text-gray-300"
/>
<button
class="bg-black text-white font-semibold py-4 rounded-lg hover:bg-slate-600 duration-300"
>
Suscribe to monthly newsletter
</button>
</div>
<picture class="md:w-[100%] w-full">
<img
src="https://dallasnews.imgix.net/1486307515-letter-writing.jpg"
alt=""
class="w-full h-full object-cover rounded-3xl"
/>
</picture>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/output.css" />
<title>Document</title>
</head>
<body class="flex items-center justify-center h-screen bg-black">
<main
class="flex w-full max-w-4xl min-h-[600px] md:flex-row flex-col-reverse gap-5 md:gap-10 bg-white rounded-3xl overflow-hidden md:p-7"
>
<div class="w-full flex flex-col p-5 md:pt-14 lg:px-7">
<h1 class="text-[39px] lg:text-[47px] font-bold mb-5">Stay updated!</h1>
<p class="font-medium mb-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium
</p>
<ul class="mb-8">
<li><span class="font-medium">Lorem ipsum dolor sit amet.</span></li>
<li><span class="font-medium">Lorem ipsum dolor sit amet.</span></li>
<li><span class="font-medium">Lorem, ipsum dolor.</span></li>
</ul>
<input
type="text"
placeholder="email@company.com"
class="border-2 rounded-lg py-4 px-6 mb-6 font-medium text-gray-300 placeholder:text-gray-300"
/>
<button
class="bg-black text-white font-semibold py-4 rounded-lg hover:bg-slate-600 duration-300"
>
Suscribe to monthly newsletter
</button>
</div>
<picture class="md:w-[100%] w-full">
<img
src="https://dallasnews.imgix.net/1486307515-letter-writing.jpg"
alt=""
class="w-full h-full object-cover rounded-3xl"
/>
</picture>
</main>
</body>
</html>