Dismissible Buttons

Related Examples

• Confirm and cancel buttons

  Author:
  Samuel Dawson

  2 years ago

  15.6k
• 
  Tags list

  click to remove the tag from list

  Author:
  Asher Wilde

  2 years ago

  10.9k
• 
  Hashtag Pills

  Minimal hastag cloud

  Author:
  TailwindFlex

  3 years ago

  12.7k
• 
  IMDB score and votes box

  Author:
  Darius G

  2 years ago

  8.5k
• 
  E-Learning Course Card with Badge and Level Indicator

  An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

  Author:
  Hamza Atig

  4 months ago

  686
• 
  Code Editor UI

  Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

  Author:
  Indra

  2 weeks ago

  92
• 
  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

  9 months ago

  2k
• 
  Tag Input field

  This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

  Author:
  Ranit Saha

  8 months ago

  1.4k
• Button wih hover gradient

  Works well with the dark theme

  Author:
  Leif99

  2 years ago

  17.4k
• 
  Notification badges with count

  Author:
  Arya

  2 years ago

  14.6k
• 
  Continue with Discord button

  Login with the Discord button for social login

  Author:
  Anonymous

  2 years ago

  11.8k
• 
  button animation

  button animation big

  Author:
  QQ-VVN

  4 months ago

  308