<section class="py-3">
<div class="container px-4 mx-auto">
<div class="relative p-6 text-center bg-gray-500 rounded-xl">
<img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
<h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
<p class="text-gray-300 mb-3">Front-end Developer</p>
<span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
<div class="flex flex-wrap items-center -mx-2">
<div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
<a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
<svg width="14" height="12" viewbox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
</svg>
<span class="ml-3">Email</span>
</a>
</div>
<div class="w-full sm:w-1/2 px-2">
<a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
<svg width="15" height="14" viewbox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
</svg>
<span class="ml-3">Call</span>
</a>
</div>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 271
- Application 231
- Banners 101
- Benefits 16
- Blog 289
- Breadcrumbs 27
- Call to action 412
- Cards 43
- Careers 44
- Confirmation 6
- Contact 194
- Content 217
- Cookies 193
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 63
- E-commerce (products) 120
- Empty state 4
- FAQ 189
- Features 526
- Footers 269
- Forms 9
- Gallery 5
- Graphs 85
- HTTP codes 216
- Hero section 355
- How it works 231
- Instagram photos 5
- Integrations 5
- Logo clouds 348
- Modals 48
- Navbar 308
- Navigation (horizontal) 441
- Navigation (vertical) 28
- Newsletter 222
- Notifications 11
- Paginations 12
- Portfolio 184
- Pricing 227
- Product info 5
- Projects 15
- Reviews 42
- Rich text 6
- Sign in / Sign up 343
- Snackbars 10
- Stats 292
- Steps 7
- Tables 174
- Tabs 2
- Team 212
- Testimonials 251
- Users 59
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Cards Components by Shuffle
Choose from 43 variations of Cards UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
