Coffee & Tea

Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

This tailwind example is contributed by Augustin, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive.

Other
Augustin profile image
Author Augustin
Tailwind v3.4 Responsive 1.5k 7

Related Examples

  • Responsive Gradient Cards
    Responsive Gradient Cards
    JUGENDRA GANGWAR JUGENDRA GANGWAR
    31
  • card
    card
    Raul antonio de la cruz hernandez Raul antonio de la cruz hernandez
    755
  • Login Form
    Login Form
    Anonymous Anonymous
    4
  • Powerful Website Features
    Powerful Website Features

    Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

    KULDEEP KULDEEP
    1.8k
  • Made a sinup form
    Made a sinup form

    Made a sinnup form #sufyandev

    Sufyan jutt Sufyan jutt
    449
  • super admin
    super admin

    super admin

    Tanvir Hasan Bappy (Tanvir) Tanvir Hasan Bappy (Tanvir)
    2.4k
  • Interactive Multi-Method Donation Section
    Interactive Multi-Method Donation Section

    Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

    Juan D. Cortorreal Juan D. Cortorreal
    1.3k
  • chart
    chart

    to chart on your family and

    Nishimwe Jeanine Nishimwe Jeanine
    1.1k
  • Neon container
    Neon container
    Anonymous Anonymous
    4.4k
  • Solo leveling 2
    Solo leveling 2

    Animation & movie field,videos,games.

    ORGIN_DREAMS ORGIN_DREAMS
    1.2k
  • Recipe Card
    Recipe Card

    beautiful recipe component with image and step-by-step instructions

    Anonymous Anonymous
    8.1k
  • Status Flow
    Status Flow
    Anonymous Anonymous
    72

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile
View all tags

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.