countdown with Tailwind CSS and Alpinejs

Related Examples

• 
  macOS Style Webpage – macOS Design in the Browser

  A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

  Author:
  Hamza Atig

  3 weeks ago

  393
• 
  Features list template

  Author:
  Lukas Müller

  2 years ago

  11.2k
• 
  Highlights - Speakers Section

  Author:
  ABDO-SY

  7 months ago

  696
• 
  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.6k
• 
  free tailwind personal portfolio template

  free tailwind personal portfolio template

  Author:
  Geoffrey Callaghan

  1 year ago

  5k
• 
  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

  6 months ago

  339
• 
  beautiful tailwind contact form

  beautiful tailwind contact form

  Author:
  Geoffrey Callaghan

  1 year ago

  5.9k
• 
  Pricing Table with Tailwind CSS and Alpinejs

  Author:
  Michael Andreuzza

  1 year ago

  3.3k
• 
  Feature cards

  Feature showcase

  Author:
  Steven Kuhn

  3 years ago

  10.2k
• 
  Modern Testimonial

  A simple and easy to use component for reviews and testimonials.

  Author:
  Coastal UI

  8 months ago

  933
• 
  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.

  Author:
  Banshee

  11 months ago

  2.4k
• 
  Feature Cards Section

  showcase key features or benefits with cards.

  Author:
  Anonymous

  1 year ago

  3.8k