Flip Card Effect Using Tailwind UI
The flip-card effect utilizes Tailwind CSS to create interactive card animations that rotate upon interaction, adding an engaging touch to the web page’s visual experience.
other
Loading component...
134 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- design inpired by https://www.profounderscapital.com/?ref=land-book.com -->
<div class="flex flex-col sm:flex-row min-h-screen items-center justify-center bg-[#16453a] gap-4">
<div class="group h-96 w-80 [perspective:1000px]">
<div
class="relative h-full w-full shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
<div class="absolute inset-0 p-8 bg-[#fdfcf7] bg-opacity-10 rounded-xl">
<div class="flex flex-col justify-between h-full">
<svg class="mb-auto" width="68" height="73" viewBox="0 0 68 73" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M31.1253 19.1862C31.5295 17.7571 32.8339 16.7705 34.319 16.7705H63.2051C65.4065 16.7705 66.998 18.8745 66.3988 20.9928L52.3721 70.5844C51.9679 72.0135 50.6636 73.0001 49.1784 73.0001H20.2923C18.0909 73.0001 16.4994 70.896 17.0986 68.7777L31.1253 19.1862Z"
fill="#DDF498" fill-opacity="0.4" />
<path
d="M15.221 2.41568C15.6252 0.986604 16.9296 0 18.4147 0H47.3008C49.5022 0 51.0937 2.10402 50.4945 4.22233L36.4678 53.8139C36.0636 55.243 34.7593 56.2296 33.2741 56.2296H4.38798C2.18657 56.2296 0.595113 54.1255 1.19427 52.0072L15.221 2.41568Z"
fill="#DDF498" fill-opacity="0.8" />
</svg>
<h1 class="mt-auto font-light text-4xl leading-5 text-[#efead6] block">Conviction</h1>
</div>
</div>
<div
class="absolute inset-0 h-full w-full rounded-xl bg-[#fdfcf7] p-8 [transform:rotateY(180deg)] [backface-visibility:hidden]">
<div class="flex flex-col justify-between h-full">
<svg class="mb-auto" width="68" height="73" viewBox="0 0 68 73" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M31.1253 19.1862C31.5295 17.7571 32.8339 16.7705 34.319 16.7705H63.2051C65.4065 16.7705 66.998 18.8745 66.3988 20.9928L52.3721 70.5844C51.9679 72.0135 50.6636 73.0001 49.1784 73.0001H20.2923C18.0909 73.0001 16.4994 70.896 17.0986 68.7777L31.1253 19.1862Z"
fill="#16453A" fill-opacity="0.4" />
<path
d="M15.221 2.41568C15.6252 0.986604 16.9296 0 18.4147 0H47.3008C49.5022 0 51.0937 2.10402 50.4945 4.22233L36.4678 53.8139C36.0636 55.243 34.7593 56.2296 33.2741 56.2296H4.38798C2.18657 56.2296 0.595113 54.1255 1.19427 52.0072L15.221 2.41568Z"
fill="#16453A" fill-opacity="0.8" />
</svg>
<div class="mt-auto space-y-4">
<p class="text-[#16453a] text-lg font-light leading-5">We meet with 1000s of companies each year. We only
invest in 6-8</p>
<p class="text-[#16453a] text-lg font-light leading-5">Our approach is to invest capital and time. So when
we are in, we are ALL-IN</p>
</div>
</div>
</div>
</div>
</div>
<div class="group h-96 w-80 [perspective:1000px]">
<div
class="relative h-full w-full shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
<div class="absolute inset-0 p-8 bg-[#fdfcf7] bg-opacity-10 rounded-xl">
<div class="flex flex-col justify-between h-full">
<svg class="mb-auto" width="76" height="70" viewBox="0 0 76 70" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M35.3985 68.2813L7.49029 51.3673C4.3646 49.4729 4.3646 44.9377 7.49029 43.0434L35.3985 26.1293C36.9488 25.1897 38.8929 25.1897 40.4433 26.1293L68.3514 43.0434C71.4771 44.9377 71.4771 49.4729 68.3514 51.3673L40.4433 68.2813C38.8929 69.2209 36.9488 69.2209 35.3985 68.2813Z"
fill="#DDF498" fill-opacity="0.8" />
<path
d="M35.3985 44.547L7.49029 27.6329C4.3646 25.7386 4.3646 21.2033 7.49029 19.309L35.3985 2.39494C36.9488 1.45533 38.8929 1.45533 40.4433 2.39494L68.3514 19.309C71.4771 21.2033 71.4771 25.7386 68.3514 27.6329L40.4433 44.547C38.8929 45.4866 36.9488 45.4866 35.3985 44.547Z"
fill="#DDF498" fill-opacity="0.4" />
</svg>
<h1 class="mt-auto font-light text-4xl leading-5 text-[#efead6] block">Honesty</h1>
</div>
</div>
<div
class="absolute inset-0 h-full w-full rounded-xl bg-[#fdfcf7] p-8 [transform:rotateY(180deg)] [backface-visibility:hidden]">
<div class="flex flex-col justify-between h-full">
<svg class="mb-auto" width="75" height="69" viewBox="0 0 75 69" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M34.7754 67.4151L6.86724 50.5011C3.74155 48.6067 3.74156 44.0715 6.86724 42.1771L34.7754 25.2631C36.3258 24.3235 38.2699 24.3235 39.8202 25.2631L67.7284 42.1771C70.8541 44.0715 70.8541 48.6067 67.7284 50.5011L39.8202 67.4151C38.2699 68.3547 36.3258 68.3547 34.7754 67.4151Z"
fill="#16453A" fill-opacity="0.8" />
<path
d="M34.7754 43.6807L6.86724 26.7667C3.74155 24.8723 3.74156 20.3371 6.86724 18.4428L34.7754 1.52873C36.3258 0.589123 38.2699 0.589123 39.8202 1.52873L67.7284 18.4428C70.8541 20.3371 70.8541 24.8723 67.7284 26.7667L39.8202 43.6807C38.2699 44.6203 36.3258 44.6203 34.7754 43.6807Z"
fill="#16453A" fill-opacity="0.4" />
</svg>
<div class="mt-auto space-y-4">
<p class="text-[#16453a] text-lg font-light leading-5">We believe in being completely honest with our
founders, and we expect the same</p>
<p class="text-[#16453a] text-lg font-light leading-5">We have opinions and we never shy away from asking
the tough questions</p>
</div>
</div>
</div>
</div>
</div>
<div class="group h-96 w-80 [perspective:1000px]">
<div
class="relative h-full w-full shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
<div class="absolute inset-0 p-8 bg-[#fdfcf7] bg-opacity-10 rounded-xl">
<div class="flex flex-col justify-between h-full">
<svg class="mb-auto" width="73" height="73" viewBox="0 0 73 73" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 27.6944C0 25.7277 1.5943 24.1334 3.56098 24.1334H21.4648C23.4315 24.1334 25.0258 22.5391 25.0258 20.5724V3.56098C25.0258 1.59431 26.6201 0 28.5868 0H45.8105C47.7772 0 49.3715 1.5943 49.3715 3.56098V46.2927C49.3715 48.2594 47.7772 49.8537 45.8105 49.8537H3.56098C1.59431 49.8537 0 48.2594 0 46.2927V27.6944Z"
fill="#DDF498" fill-opacity="0.4" />
<path
d="M73 45.3918C73 47.3585 71.4057 48.9528 69.439 48.9528H51.5352C49.5685 48.9528 47.9742 50.5471 47.9742 52.5138V69.439C47.9742 71.4057 46.3799 73 44.4132 73H27.1895C25.2228 73 23.6285 71.4057 23.6285 69.439V26.8854C23.6285 24.9187 25.2228 23.3244 27.1895 23.3244H69.439C71.4057 23.3244 73 24.9187 73 26.8854V45.3918Z"
fill="#DDF498" fill-opacity="0.8" />
</svg>
<h1 class="mt-auto font-light text-4xl leading-5 text-[#efead6] block">Support</h1>
</div>
</div>
<div
class="absolute inset-0 h-full w-full rounded-xl bg-[#fdfcf7] p-8 [transform:rotateY(180deg)] [backface-visibility:hidden]">
<div class="flex flex-col justify-between h-full">
<svg class="mb-auto" width="73" height="73" viewBox="0 0 73 73" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 27.6944C0 25.7277 1.5943 24.1334 3.56098 24.1334H21.4648C23.4315 24.1334 25.0258 22.5391 25.0258 20.5724V3.56098C25.0258 1.59431 26.6201 0 28.5868 0H45.8105C47.7772 0 49.3715 1.5943 49.3715 3.56098V46.2927C49.3715 48.2594 47.7772 49.8537 45.8105 49.8537H3.56098C1.59431 49.8537 0 48.2594 0 46.2927V27.6944Z"
fill="#1D493F" fill-opacity="0.4" />
<path
d="M73 45.3918C73 47.3585 71.4057 48.9528 69.439 48.9528H51.5352C49.5685 48.9528 47.9742 50.5471 47.9742 52.5138V69.439C47.9742 71.4057 46.3799 73 44.4132 73H27.1895C25.2228 73 23.6285 71.4057 23.6285 69.439V26.8854C23.6285 24.9187 25.2228 23.3244 27.1895 23.3244H69.439C71.4057 23.3244 73 24.9187 73 26.8854V45.3918Z"
fill="#1D493F" fill-opacity="0.8" />
</svg>
<div class="mt-auto space-y-4">
<p class="text-[#16453a] text-lg font-light leading-5">We know what it takes to build a successful business
and we know the hardship as well</p>
<p class="text-[#16453a] text-lg font-light leading-5">With us you get a partner through the hard times as
well as the good</p>
</div>
</div>
</div>
</div>
</div>
</div>