ok
Mini Shell
<?php include('header.php'); ?>
<!-- Page Header Start -->
<div class="page-header parallaxie" style="background-image: url('banner/banner6.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center -1.21449px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Page Header Box Start -->
<div class="page-header-box">
<h1 class="text-anime">Gallery</h1>
</div>
<!-- Page Header Box End -->
</div>
</div>
</div>
</div>
<!-- Page Header End -->
<!-- Blog Archive Page Start -->
<div class="page-blog-archive">
<div class="container">
<div class="relative font-inter antialiased">
<main class="relative min-h-screen flex flex-col justify-center bg-white overflow-hidden">
<div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
<!-- Tabs component -->
<div x-data="{ activeTab: 1 }">
<!-- Buttons -->
<div class="flex justify-center" style="text-align:center;">
<div
role="tablist"
class="max-[480px]:max-w-[180px] inline-flex flex-wrap justify-center bg-slate-200 rounded-[20px] p-1 mb-8 min-[480px]:mb-12"
@keydown.right.prevent.stop="$focus.wrap().next()"
@keydown.left.prevent.stop="$focus.wrap().prev()"
@keydown.home.prevent.stop="$focus.first()"
@keydown.end.prevent.stop="$focus.last()"
>
<!-- Button #1 -->
<button
id="tab-1"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 1 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 1 ? 0 : -1"
:aria-selected="activeTab === 1"
aria-controls="tabpanel-1"
@click="activeTab = 1"
@focus="activeTab = 1"
style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">All</button>
<!-- Button #2 -->
<button
id="tab-2"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 2 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 2 ? 0 : -1"
:aria-selected="activeTab === 2"
aria-controls="tabpanel-2"
@click="activeTab = 2"
@focus="activeTab = 2"
style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">District Level</button>
<!-- Button #3 -->
<button
id="tab-3"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 3 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 3 ? 0 : -1"
:aria-selected="activeTab === 3"
aria-controls="tabpanel-3"
@click="activeTab = 3"
@focus="activeTab = 3"
style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">State Level</button>
<button
id="tab-4"
class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out"
:class="activeTab === 4 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'"
:tabindex="activeTab === 4 ? 0 : -1"
:aria-selected="activeTab === 4"
aria-controls="tabpanel-4"
@click="activeTab = 4"
@focus="activeTab = 4"
style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">National Level</button>
</div>
</div>
<!-- Tab panels -->
<div class="max-w-[640px] mx-auto">
<div class="relative flex flex-col">
<!-- Panel #1 -->
<article
id="tabpanel-1"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-1"
x-show="activeTab === 1"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery1.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery2.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery4.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
</div>
<div class="row" style="margin-top:2%;">
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery5.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery6.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery7.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery8.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
</div>
</article>
<!-- Panel #2 -->
<article
id="tabpanel-2"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-2"
x-show="activeTab === 2"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery4.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery7.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
</div>
</article>
<!-- Panel #3 -->
<article
id="tabpanel-3"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-3"
x-show="activeTab === 3"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery1.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery6.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
</div>
</article>
<article
id="tabpanel-4"
class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-4"
x-show="activeTab === 4"
x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-8"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-12"
>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery2.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3">
<img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery5.jpg" alt="Tab 01" style="border-radius: 20px;"/>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- End: Tabs component -->
</div>
</main>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Blog Archive Page End -->
<?php include('footer.php'); ?>
Zerion Mini Shell 1.0