Home
Michael Andreuzza
Layout switcher with tailwindcss and alpinejs

Layout switcher with tailwindcss and alpinejs

This tailwind example is contributed by Michael Andreuzza, on 01-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Michael Andreuzza

1.1k

Fork Fullscreen

<section class="bg-white relative overflow-hidden">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
  <div class="max-w-xl mx-auto text-center">
   <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
    <div>
     <h1>Layout switcher</h1>
     <p class="text-balance">
      Click the button below to switch between 2 and 4 columns.
     </p>
    </div>
   </div>
  </div> 
  <div class="max-w-3xl mx-auto flex flex-col mt-6 border-t pt-12" x-data="{ isFourColumns: true }">
   <div class="flex justify-center">
     <button @click="isFourColumns = !isFourColumns" class="rounded-full bg-blue-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-auto" x-text="isFourColumns ? 'Switch to 2 Columns' : 'Switch to 4 Columns'">Switch to 2 Columns</button>
   </div> 
   <div :class="{'grid-cols-4': isFourColumns, 'grid-cols-2': !isFourColumns}" class="grid gap-2 mt-4 grid-cols-4">
    
    <div class="bg-gray-100 rounded-lg p-8">Item 1</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 2</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 3</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 4</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 5</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 6</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 7</div>
    <div class="bg-gray-100 rounded-lg p-8">Item 8</div>
   </div>
  </div> 
  
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a grid toggle with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-600 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-grid-toggle-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/gridtoggle/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

9 months ago

401
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

52.1k
House Cleaning Website Services Section
House Cleaning Website Services Section Photo by @candjstudios & @framesforyourheart on Unsplash

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.4k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

17k
Our Vision block

Author:
L.J. Weber

2 years ago

12.2k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.7k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

3 weeks ago

183
Feature section - Htmlwind
Three columns with icons

Author:
Htmlwind

7 months ago

617
Feature Overview Section with Dark Mode Support
Feature cards with icon

Author:
Nomusa Botha

1 year ago

1.7k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16.4k
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components