Untitled
unknown
html
3 years ago
6.2 kB
22
Indexable
<!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>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<div class="bg-blue-100 w-2/4 mt-24 m-auto px-5 py-4 rounded-md border-blue-200 border-2">
<p class="text-blue-700">A simple primary alert-check it out!</p>
</div>
<div class="bg-gray-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-gray-300 border-2">
<p class="text-gray-700">A simple primary alert-check it out!</p>
</div>
<div class="bg-green-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-green-300 border-2">
<p class="text-green-700">A simple primary alert-check it out!</p>
</div>
<div class="bg-red-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-red-300 border-2">
<p class="text-red-700">A simple primary alert-check it out!</p>
</div>
<div class="bg-orange-100 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-orange-200 border-2">
<p class="text-orange-700">A simple primary alert-check it out!</p>
</div>
<div class="bg-cyan-200 w-2/4 mt-2 m-auto px-5 py-4 rounded-md border-cyan-300 border-2">
<p class="text-cyan-700">A simple primary alert-check it out!</p>
</div>
</div>
<div class="my-24 m-auto w-2/4">
<button class="px-3 pt-1 pb-2 bg-blue-600 rounded mx-1 text-white">primary</button>
<button class="px-3 pt-1 pb-2 bg-gray-500 rounded mx-1 text-white">secondery</button>
<button class="px-3 pt-1 pb-2 bg-green-700 rounded mx-1 text-white">success</button>
<button class="px-3 pt-1 pb-2 bg-red-600 rounded mx-1 text-white">danger</button>
<button class="px-3 pt-1 pb-2 bg-yellow-400 rounded mx-1">warning</button>
<button class="px-3 pt-1 pb-2 bg-cyan-400 rounded mx-1">info</button>
<button class="px-3 pt-1 pb-2 bg-gray-100 rounded mx-1">light</button>
<button class="px-3 pt-1 pb-2 bg-black rounded mx-1 text-white">dark</button>
<div class="mt-5">
<button class="px-3 pt-1 pb-2 bg-blue-600 rounded-l text-white">1</button>
<button class="-mx-1 px-4 pt-1 pb-2 bg-blue-600 text-white">2</button>
<button class="-mx-1 px-4 pt-1 pb-2 bg-blue-600 text-white">3</button>
<button class="-mx-1 px-3 pt-1 pb-2 bg-blue-600 rounded-r text-white">4</button>
<button class="px-3 pt-1 pb-2 bg-gray-600 rounded-l text-white ml-5">5</button>
<button class="-mx-1 px-4 pt-1 pb-2 bg-gray-600 text-white">6</button>
<button class="-mx-1 px-3 pt-1 pb-2 bg-gray-600 rounded-r text-white">7</button>
<button class="px-3 pt-1 pb-2 bg-cyan-400 rounded ml-5">5</button>
</div>
<div class="mt-5">
<button class="px-3 pt-1 pb-2 bg-white text-blue-600 rounded-l ml-5 border-2 border-r-0 border-blue-600 focus:bg-blue-600 focus:text-white">Radio 1</button>
<button class="-mx-1 px-4 pt-1 pb-2 bg-white text-blue-600 border-2 border-blue-600 focus:bg-blue-600 focus:text-white">Radio 2</button>
<button class="-mx-1 px-3 pt-1 pb-2 bg-white text-blue-600 border-2 border-blue-600 focus:bg-blue-600 focus:text-white rounded-r">Radio 3</button>
</div>
<div class="mt-5">
<div class="w-60 rounded border ">
<div class="bg-gray-500 h-36 rounded-t mb-2"></div>
<div class="p-3">
<h3 class="font-bold text-lg">Card title</h3>
<p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>
</div>
<div class="p-3">
<button class="px-3 pt-1 pb-2 bg-blue-600 rounded mx-1 text-white">Go somewhere</button>
</div>
</div>
</div>
</div>
<div class="my-5 m-auto w-3/4 grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-3">
<div class="">
<div class="w-60 rounded border ">
<div class="bg-gray-500 h-36 rounded-t mb-2"></div>
<div class="p-3">
<h3 class="font-bold text-lg">Card title</h3>
<p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>
</div>
</div>
</div>
<div>
<div class="w-60 rounded border ">
<div class="bg-gray-500 h-36 rounded-t mb-2"></div>
<div class="p-3">
<h3 class="font-bold text-lg">Card title</h3>
<p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>
</div>
</div>
</div>
<div>
<div class="w-60 rounded border ">
<div class="bg-gray-500 h-36 rounded-t mb-2"></div>
<div class="p-3">
<h3 class="font-bold text-lg">Card title</h3>
<p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>
</div>
</div>
</div>
<div>
<div class="w-60 rounded border ">
<div class="bg-gray-500 h-36 rounded-t mb-2"></div>
<div class="p-3">
<h3 class="font-bold text-lg">Card title</h3>
<p class="te">This is a longer card with suporting text below as a natural lead in two additional content. this content is a little bit biger.</p>
</div>
</div>
</div>
</div>
</body>
</html>Editor is loading...