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

652

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

Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

6 months ago

1.5k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.2k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

8 months ago

1.9k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

9 months ago

2.2k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

10 months ago

1.5k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

1 year ago

6.3k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

10 months ago

2.2k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

10 months ago

1.6k
Hotel rooms
A simple room overview

Author:
Matti

2 months ago

471
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.1k
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

10.1k
Feature card

Author:
Matti

2 months ago

442

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components