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

Features grid

Author:
Sophia Baker

2 years ago

10.2k
Our services component

Author:
Anonymous

1 year ago

1.8k
Responsive Features Section

Author:
Abdul Baset Bappy

6 months ago

905
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

1 year ago

2.4k
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

1 year ago

2.7k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.3k
Features

Author:
Michael Andreuzza

1 year ago

5.2k
Our Vision block

Author:
L.J. Weber

2 years ago

12.2k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Author:
Kavita Joshi

2 years ago

7k
Feature showcase with images

Author:
Amit Pachange

2 years ago

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

Author:
Akram Khan

1 year ago

3k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components