<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">
<title>TailwindCSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config ={
theme: {
screens : {
sm:'480px',
md:"768px",
lg: "976px",
xl:"1440px"
},
extend: {
colors: {
grey:'#758283',
red: '#EB4D4B',
blue: '#3944F7',
}
}
}
}
</script>
</head>
<body>
<nav class="relative container bg-red p-8 mx-auto " >
<div class="header flex items-center justify-center">
<div class="pt-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/2048px-Tailwind_CSS_Logo.svg.png" alt="Logo" class="w-10">
</div>
<div class="head"><h1 class="ml-3 text-indigo-900 font-bold text-3xl">TailwindCSS</h1></div>
</div>
</nav>
<section class="content">
<div class="container bg-gray-900 pt-16 flex flex-col-reverse items-center md:flex-row mx-auto md:space-x-6">
<div class="ml-10 flex flex-col md:w-1/2">
<h1 class="mt-4 max-w-md text-3xl font-bold text-white text-center md:text-left md:text-red">TailwindCSS is fun to Learn</h1>
<p class="text-left text-gray-400 pt-7">Tailwind CSS is known as a utility first CSS Framework. It has predefined classes which are to be written in the html markup. These classes are enough to style the document.</p>
<div class="flex justify-center mt-4 md:justify-start">
<a class="border-transparent ml-2 mb-10 border-2 px-7 bg-white text-red rounded hover:bg-red hover:text-white hover:border hover:border-2 hover:border-white" href="#">Learnmore</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center items-center">
<img class="w-80 mb-10" src="https://kinsta.com/wp-content/uploads/2022/01/tailwind-css.jpg" alt="Tailwindcss">
</div>
</div>
</section>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.