<section class="py-12 bg-green-500">
<div class="container px-4 mx-auto">
<div class="max-w-6xl mx-auto">
<div class="text-center">
<h3 class="text-2xl font-black mb-2">#SHOPAL on Instagram</h3>
<p class="text-lg font-bold mb-6">Phasellus lorem malesuada ligula pulvinar commodo maecenas</p>
<div class="max-w-md md:max-w-none mx-auto mb-10">
<div class="rounded-md border-2 border-black shadow overflow-hidden">
<div class="flex flex-wrap items-center">
<div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 xl:border-b-0 border-r-2 border-black">
<img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta6.png" alt="">
</div>
<div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 xl:border-b-0 md:border-r-2 border-black">
<img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta5.png" alt="">
</div>
<div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 xl:border-b-0 border-r-2 border-black">
<img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta4.png" alt="">
</div>
<div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 md:border-b-0 md:border-r-2 border-black">
<img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta3.png" alt="">
</div>
<div class="w-1/2 md:w-1/3 xl:w-1/6 border-r-2 border-black">
<img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta2.png" alt="">
</div>
<div class="w-1/2 md:w-1/3 xl:w-1/6">
<img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta1.png" alt="">
</div>
</div>
</div>
</div>
<a class="group relative inline-block h-12 w-full sm:w-64 bg-blueGray-900 rounded-md" href="#">
<div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
<div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
<span class="text-base font-black text-white">Check our Instagram</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 106
- Application 108
- Banners 76
- Benefits 16
- Blog 132
- Breadcrumbs 27
- Call to action 199
- Cards 43
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 35
- E-commerce (products) 76
- Empty state 4
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 58
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 219
- Navigation (vertical) 12
- Newsletter 129
- Notifications 11
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 159
- Steps 7
- Tables 91
- Tabs 2
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Instagram Photos Components by Shuffle
Choose from 5 variations of Tailwind application components. Presented here are variants available in various UI libraries.
Get access to all Tailwind application components, code and our visual editor. Try the demo for free!
