<!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">
<title>Lucas Sign</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="mx-5">
<header class="my-5 text-center bg-gray-200 opacity-50">
<p class="font-extrabold text-transparent text-2xl lg:text-6xl bg-clip-text bg-gradient-to-r from-zinc-600 to-pink-600">This is one of my first codes using Tail Wind</p>
</header>
<main class="bg-gradient-to-l from-red-200 to-yellow-200 p-10">
<h1 class="font-extrabold text-center text-1xl lg:text-4xl text-transparent bg-clip-text bg-gradient-to-l from-yellow-600 to-red-600">Testing the tail wind classes</h1>
</main>
<section class="p-2 bg-gradient-to-r from-green-400 to-pink-300 my-5 flex flex-col w-1/5">
<h2 class="lg:w-1/5 mx-1 font-bold lg:text-3xl text-2xl">Lucas Bailo</h2>
<p class="mx-3">Future Full Stack Dev</p>
</section>
<footer class="my-5 bg-gradient-to-r from-pink-300 to-slate-400 text-center">Thanks!</footer>
</body>
</html>
