Buttons, widely called CTAs in tech are backbones for engineers to make user interact easily and navigate different section with a click 👆
<div class="bg-blue-200">
<div
class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Sample text</span>
<span class="block text-indigo-600">Simple paragragh.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-900 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700"
>
Click here
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50"
>
Click here too, why waiting
</a>
</div>
</div>
</div>
</div><div id="dropdown" class="m-5 inline-block">
<button
onclick="toggle()"
class="inline-flex justify-center text-center items-center rounded-md border border-transparent bg-indigo-600 px-5 py-2 text-base font-medium text-white hover:bg-indigo-700"
>
Dropdown
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4 ml-2"
>
<path
fill-rule="evenodd"
d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z"
clip-rule="evenodd"
/>
</svg>
</button>
<div id="menu" class="flex flex-col bg-white drop-shadow-md">
<a class="px-5 py-3 hover:bg-gray-200 border-b border-gray-200" href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
>Option1</a
>
<a class="px-5 py-3 hover:bg-gray-300 border-b border-gray-200" href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
>Option2</a
>
<a class="px-5 py-3 hover:bg-gray-400 border-b border-gray-200" href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
>Option3</a
>
<a class="px-5 py-3 hover:bg-gray-500" href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">Option4</a>
</div>
</div>
<script>
var menu = document.getElementById("menu");
function toggle() {
if (menu.classList.contains("hidden")) {
menu.classList.remove("hidden");
} else {
menu.classList.add("hidden");
}
}
window.onclick = function (event) {
var dropdown = document.getElementById("dropdown");
if (
!dropdown.contains(event.target) &&
!menu.classList.contains("hidden")
) {
menu.classList.add("hidden");
}
};
</script><div class="bg-sky-500 p-20">
<div class="mt-8">
<button
class="bg-orange-200 hover:bg-orange-500 font-medium text-base border-transparent px-6 py-4 rounded-md flex flex-row items-center gap-4 text-blue-800"
>
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"> See more </a>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="{1.5}"
stroke="currentColor"
class="w-4 h-4 font-medium"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</button>
</div>
</div>
</div><div class="h-screen bg-sky-300">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="rounded-4xl inline-flex shadow">
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="inline-flex items-center justify-center rounded-sm border border-transparent bg-red-200 px-5 py-3 text-base font-medium text-red-500 hover:bg-indigo-700">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</span>
Delete
</a>
</div>
<div class="ml-3 inline-flex rounded-full shadow">
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50"> Learn more </a>
</div>
</div>
</div>
</div><div class="h-screen bg-sky-300">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8">
<button class="flex flex-row items-center gap-4 rounded-full border-transparent bg-blue-500 px-6 py-4 text-base font-medium text-white shadow hover:bg-blue-800">
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"> Download Now </a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
</button>
</div>
</div>
</div>
<div class="h-screen bg-sky-300">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="inline-flex items-center justify-center rounded-sm border border-blue-400 bg-red-400 px-5 py-3 text-base font-medium text-gray-800 hover:bg-red-200">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</span>
Setting
</a>
</div>
</div>
</div>
</div><div class="h-screen bg-sky-300">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-full border-2 border-black hover:border-gray-300">
<a
href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
class="inline-flex flex-col items-center justify-center rounded-full border border-transparent font-bold gap-1 w-28 h-28 bg-rose-400 hover:bg-gray-200">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
</svg>
</span>
<div>Scroll Down</div>
</a>
</div>
</div>
</div>
</div>
</div><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="flex h-screen flex-col bg-sky-300">
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-xl bg-rose-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-white" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-full bg-rose-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-white" id="play-btn"></i>
</button>
</div>
</div>
</body><div class="flex h-screen w-screen items-center justify-center bg-sky-300">
<form>
<div class="text-blue relative focus-within:text-rose-400">
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<div class="h-4 border-l-2 border-solid border-amber-500 pr-1"></div>
<button class="focus:shadow-outline p-2 focus:outline-none">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="h-6 w-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input class="text-red w-56 rounded-full bg-amber-500 py-3 pl-5 text-sm placeholder:text-black focus:bg-white focus:text-gray-900 focus:outline-none" placeholder="Search Here" autocomplete="off" />
</div>
</form>
</div><div class="h-screen bg-sky-300">
<div
class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-full shadow">
<a
href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-emerald-600 px-5 py-3 text-base font-medium text-red-800 hover:bg-green-500"
>
Learn More
</a>
</div>
</div>
</div>
</div>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<div
class="w-100 flex flex-row items-center justify-center bg-gradient-to-tr from-[#000855] to-[#690101] py-3 md:flex-row md:py-6"
>
<div class="flex h-screen w-screen flex-row items-center justify-center">
<div
class="group float-left m-3 inline-block h-16 w-16 cursor-pointer overflow-hidden rounded-full bg-white py-0 shadow-xl transition-all ease-out hover:w-52"
>
<div
class="box-border inline-block h-16 w-16 rounded-full bg-zinc-900 text-center leading-[65px] transition-all ease-out group-hover:bg-[#333]"
>
<i
class="fab fa-github text-2xl leading-[60px] text-white transition-all ease-out"
></i>
</div>
<span
class="ml-2 text-xl font-medium leading-[65px] transition-all ease-out group-hover:text-[#333]"
><a
href="https://github.com/jsvigneshkanna"
target="_blank"
rel="noreferrer"
>
Github
</a></span
>
</div>
<div
class="group float-left m-3 inline-block h-16 w-16 cursor-pointer overflow-hidden rounded-full bg-white py-0 shadow-xl transition-all ease-out hover:w-52"
>
<div
class="box-border inline-block h-16 w-16 rounded-full bg-zinc-900 text-center leading-[65px] transition-all ease-out group-hover:bg-[#0A66C2]"
>
<i
class="fab fa-linkedin text-2xl leading-[60px] text-white transition-all ease-out"
></i>
</div>
<span
class="ml-2 text-xl font-medium leading-[65px] transition-all ease-out group-hover:text-[#0A66C2]"
><a
href="https://www.linkedin.com/in/jsvigneshkanna/"
target="_blank"
rel="noreferrer"
>
Linkedin
</a></span
>
</div>
</div>
</div><div class="h-screen bg-sky-300">
<div
class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
class="inline-flex items-center justify-center rounded-sm border border-transparent bg-indigo-700 px-5 py-3 text-base font-medium text-white hover:bg-red-300"
>
<span class="mx-2">
<svg
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.5 5.7662L26.8762 19.7174C28.08 21.7212 27.4888 24.3574 25.555 25.6049C24.906 26.0252 24.1494 26.2492 23.3763 26.2499H6.6225C4.34625 26.2499 2.5 24.3374 2.5 21.9762C2.5 21.1774 2.71625 20.3962 3.1225 19.7174L11.5 5.7662C12.7025 3.76245 15.245 3.14869 17.1788 4.39619C17.7138 4.74119 18.1663 5.20995 18.5 5.7662ZM15.725 6.81494C15.572 6.71652 15.4006 6.65013 15.2212 6.61979C15.0418 6.58946 14.8581 6.5958 14.6812 6.63844C14.5043 6.68109 14.3379 6.75914 14.192 6.8679C14.0462 6.97665 13.9239 7.11385 13.8325 7.27119L5.45625 21.2249C5.32019 21.4523 5.24846 21.7124 5.24875 21.9774C5.24875 22.7649 5.86375 23.4024 6.62375 23.4024H23.375C23.6325 23.4024 23.8838 23.3274 24.1013 23.1874C24.4134 22.9801 24.6334 22.6603 24.7156 22.2947C24.7978 21.9291 24.7358 21.5459 24.5425 21.2249L16.1662 7.27119C16.0564 7.08747 15.9059 6.93139 15.7263 6.81494H15.725ZM15 21.2499C14.6685 21.2499 14.3505 21.1182 14.1161 20.8838C13.8817 20.6494 13.75 20.3315 13.75 19.9999C13.75 19.6684 13.8817 19.3505 14.1161 19.1161C14.3505 18.8816 14.6685 18.7499 15 18.7499C15.3315 18.7499 15.6495 18.8816 15.8839 19.1161C16.1183 19.3505 16.25 19.6684 16.25 19.9999C16.25 20.3315 16.1183 20.6494 15.8839 20.8838C15.6495 21.1182 15.3315 21.2499 15 21.2499ZM15 9.99995C15.3315 9.99995 15.6495 10.1316 15.8839 10.3661C16.1183 10.6005 16.25 10.9184 16.25 11.2499V16.2499C16.25 16.5815 16.1183 16.8994 15.8839 17.1338C15.6495 17.3682 15.3315 17.4999 15 17.4999C14.6685 17.4999 14.3505 17.3682 14.1161 17.1338C13.8817 16.8994 13.75 16.5815 13.75 16.2499V11.2499C13.75 10.9184 13.8817 10.6005 14.1161 10.3661C14.3505 10.1316 14.6685 9.99995 15 9.99995V9.99995Z"
fill="#F24E1E"
/>
</svg>
</span>
Report
</a>
</div>
</div>
</div>
</div><div class="flex h-screen bg-sky-300">
<div
class="m-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
>
<button
class="flex flex-row items-center gap-4 overflow-hidden rounded-full border-transparent bg-left-top bg-repeat px-6 py-4 text-base font-medium text-white shadow"
style="
background-image: repeating-linear-gradient(
-45deg,
#7a67b2 10px 40px,
#71b9b0 40px 100px,
#c07a83 100px 150px,
#c9c57c 150px 200px,
#919fce 200px 250px
);
"
>
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="text-black">
Get Started
</a>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#000"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
/>
</svg>
</button>
</div>
</div><div class="flex gap-8 bg-sky-200 p-20">
<!-- Left -->
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
<div class="flex items-center justify-center rounded-md bg-[#1855CB] p-3 shadow duration-200 hover:bg-slate-700">
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</div>
</a>
<!-- Right -->
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
<div class="flex items-center justify-center rounded-md bg-[#1855CB] p-3 shadow-sm duration-200 hover:bg-slate-700">
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</a>
</div>
<!-- Round Icons -->
<div class="flex gap-8 bg-red-200 p-20">
<!-- Left -->
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
<div class="flex items-center justify-center rounded-full bg-[#1855CB] p-3 shadow-sm duration-200 hover:bg-slate-700">
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</div>
</a>
<!-- Right -->
<a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
<div class="flex items-center justify-center rounded-full bg-[#1855CB] p-3 shadow-sm duration-200 hover:bg-slate-700">
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</a>
</div>