Spread The World Hacktoberfest - Tailwind Component
A full card sponsor by Hacktoberfest, it is made with Tailwind CSS.
card
Loading component...
58 lines
<div class="w-full bg-[#2B3531]">
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
<div class="text-center pb-12">
<h1 class="font-bold uppercase text-4xl lg:text-5xl font-heading text-[#91A88C]">
Spread the world
</h1>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:px-0 px-8">
<div
class="relative w-full bg-[#91A88C] hover:bg-[#DBE8D9] rounded-lg sahdow-lg md:px-12 sm:px-2 px-12 pt-40 pb-20 flex flex-col justify-center items-center rounded-tr-[80px] rounded-bl-[40px] group">
<div class="absolute top-16">
<img class="object-center object-cover h-24 w-24 group-hover:h-36 group-hover:w-36"
src="https://cdn-icons-png.flaticon.com/128/179/179342.png" alt="Twitter">
</div>
<div class="text-center mt-14">
<p class="text-2xl text-[#DBE8D9] group-hover:text-gray-700 font-bold ">Twitter</p>
</div>
</div>
<div
class="relative w-full bg-[#91A88C] hover:bg-[#DBE8D9] rounded-lg sahdow-lg md:px-12 sm:px-2 px-12 pt-40 pb-20 flex flex-col justify-center items-center rounded-tr-[80px] rounded-bl-[40px] group">
<div class="absolute top-16">
<img class="object-center object-cover h-24 w-24 group-hover:h-36 group-hover:w-36"
src="https://cdn-icons-png.flaticon.com/128/179/179319.png" alt="Facebook">
</div>
<div class="text-center mt-16">
<p class="text-2xl text-[#DBE8D9] group-hover:text-gray-700 font-bold ">Facebook</p>
</div>
</div>
<div
class="relative w-full bg-[#91A88C] hover:bg-[#DBE8D9] rounded-lg sahdow-lg md:px-12 sm:px-2 px-12 pt-40 pb-20 flex flex-col justify-center items-center rounded-tr-[80px] rounded-bl-[40px] group">
<div class="absolute top-16">
<img class="object-center object-cover h-24 w-24 group-hover:h-36 group-hover:w-36"
src="https://cdn-icons-png.flaticon.com/128/179/179330.png" alt="LinkedIn">
</div>
<div class="text-center mt-14">
<p class="text-2xl text-[#DBE8D9] group-hover:text-gray-700 font-bold ">LinkedIn</p>
</div>
</div>
</div>
<div
class="relative py-8 px-10 bg-[#DBE8D9] text-center cursor-pointer text-2xl font-bold my-16 rounded-lg hover:bg-[#91A88C] hover:text-[#DBE8D9]">
Join the Event Discord Coversation
<div class="absolute bottom-5 sm:left-52 z-40 opacity-5 overflow-hidden">
<img src="https://cdn-icons-png.flaticon.com/128/5968/5968759.png" alt="icon 1" class="w-12 h-12 rotate-45">
</div>
<div class="absolute bottom-3 left-52 sm:left-96 z-40 opacity-5 overflow-hidden">
<img src="https://cdn-icons-png.flaticon.com/128/5968/5968759.png" alt="icon 1" class="w-16 h-16 -rotate-45">
</div>
</div>
</section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Montserrat', sans-serif;
}
</style>