- Home
-
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
Author Michael Andreuzza
Related Examples
-
2 years ago10k
-
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.
4 months ago1.3k -
4 months ago588
-
1 year ago9.1k
-
2 years ago10.5k
-
Features grid example
Tailwind clean and responsive features section with the heading
1 year ago12.3k -
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too
2 months ago504 -
11 months ago2.3k
-
9 months ago1.4k
-
Feature Overview Section with Dark Mode Support
Feature cards with icon
4 months ago839 -
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)
4 months ago489 -
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.
2 weeks ago288
Explore components by Tags
Didn't find component you were looking for?
Search from 2100+ components