Forem: mematthew123

How-To: Twist Cards using Tailwind CSS

mematthew123 — Tue, 08 Apr 2025 16:24:52 +0000

What are Twist Cards?

Twist cards are interactive elements that combine smooth rotation and scaling animations when users hover over them. Unlike traditional hover effects, twist cards create a three-dimensional sensation through precise rotation angles and coordinated transforms. Most commonly found in event showcases, team galleries, and product displays, twist cards add a layer of sophistication without overwhelming your interface.

Benefits of Twist Cards

Twist cards offer several advantages for enhancing your website's user experience:

They create a subtle yet captivating 3D effect that draws users' attention naturally
The combination of rotation and scaling provides depth that makes content feel more tangible and interactive
They're particularly effective for highlighting time-sensitive content like events or limited-time offers
The animation is smooth and predictable, making it accessible and non-disruptive to users

When implemented thoughtfully, twist cards can transform standard content sections into engaging, interactive experiences that encourage exploration while maintaining professional polish.

Similar to our 3D Flip Cards tutorial, we'll show you how to create these sophisticated animations using Tailwind CSS step by step. The technique we'll cover combines transform properties with smooth transitions to achieve a natural, fluid motion that enhances rather than overshadows your content.

What We're Building

We'll create an event showcase using twist cards that feature:

Smooth Transform Effects
- 12-degree rotation on hover
- Scale increase for depth
- Coordinated animations on both the card and its gradient backdrop
Professional UI Elements
- Clean event card layout
- Dynamic status tags ("Limited Seats", "Early Bird", "Sold Out")
- Responsive image container
- Gradient background that animates with the twist
Responsive Design
- Adapts from single column to three-column grid
- Maintains smooth animations across devices
- Optimized spacing and scaling at all breakpoints

Want to see it in action?

Let's dive in and see how it's done!

To begin with we will create a new Next.js app using npx create-next-app@latest and selecting Tailwind CSS from the setup instructions.

We will then need to create a new folder called 'components'.

Inside of our new components folder we will create a new file TwistCardComponent.tsx

1. Set Up the Section Wrapper and Mock Data

Firt let's set up our base structure with some demo data:

Data Structure Breakdown:

const events = [
  {
    id: 1,
    title: "Web Dev Summit 2024",
    date: "Dec 15-17 • San Francisco",
    image:
      "https://images.unsplash.com/photo-1645323927890-ebc1462c12c8?q=80&w=2929&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    tags: ["Limited Seats", "Early Bird"],
  },
  {
    id: 2,
    title: "Design Thinking 2024",
    date: "Jan 15-17 • New York",
    image:
      "https://images.unsplash.com/photo-1645323927890-ebc1462c12c8?q=80&w=2929&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    tags: ["Sold Out", "Sold Out"],
  },
  {
    id: 3,
    title: "Product Management 2024",
    date: "Feb 15-17 • Los Angeles",
    image:
      "https://images.unsplash.com/photo-1645323927890-ebc1462c12c8?q=80&w=2929&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    tags: ["Limited Seats", "Early Bird"],
  },
];

Each event object contains:

id: Unique identifier for React key prop
title: Event name display
date: Formatted date and location string
image: URL for event preview image
tags: Array of status indicators that determine styling

Now, let's set up our main section wrapper with responsive padding and container settings:

const TwistCard = () => {
  return (
    <section className="py-8 bg-slate-200 mx-auto sm:py-12 md:py-16">
  <div className="container mx-auto px-4">
    <div className="flex justify-center object-center flex-col gap-8 sm:gap-12">
      <h2 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold text-center text-rose-950 tracking-tight pb-8 md:pb-12 lg:pb-20">
        Upcoming Events
      </h2>
      {/* Grid container will go here */}
    </div>
  </div>
</section>
  );
};

Let's break this down and examine each container:

Outer Section className="py-8 bg-slate-200 mx-auto sm:py-12 md:py-16"

Base styling:
- bg-slate-200: Light gray background
- mx-auto: Center horizontally
Responsive padding:
- py-8: 2rem padding on mobile
- sm:py-12: 3rem padding on small screens
- md:py-16: 4rem padding on medium screens

Inner Container className="container mx-auto px-4"

Layout:
- container: Max-width constraint
- mx-auto: Center horizontally
- px-4: Consistent horizontal padding

Content Wrapper className="flex justify-center object-center flex-col gap-8 sm:gap-12"

Layout:
- flex flex-col: Vertical stack
- justify-center: Center content vertically
- object-center: Center aligned objects
Spacing:
- gap-8: 2rem gap on mobile
- sm:gap-12: 3rem gap on larger screens

Heading className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold text-center text-rose-950 tracking-tight pb-8 md:pb-12 lg:pb-20"

Typography:
- text-3xl: Base font size
- md:text-4xl: Larger on medium screens
- lg:text-5xl: Larger on large screens
- xl:text-6xl: Largest on extra-large screens
- font-semibold: Bold weight
- tracking-tight: Tighter letter spacing
Styling:
- text-center: Center alignment
- text-rose-950: Deep rose color
Spacing:
- pb-8: Base bottom padding
- md:pb-12: Increased on medium screens
- lg:pb-20: Largest on large screens

2. Create the Grid Layout

Next, let's add our responsive grid container for the cards:

<div className="grid grid-cols-1 gap-8 md:gap-12 lg:grid-cols-2 xl:grid-cols-3 justify-items-center">
  {events.map((event) => (
    <div
      key={event.id}
      className="group h-[380px] w-[320px] sm:h-[480px] sm:w-96 md:h-96"
    >
      {/* Card content will go here */}
    </div>
  ))}
</div>

Let's break down these classes:

Grid Container className="grid grid-cols-1 gap-8 md:gap-12 lg:grid-cols-2 xl:grid-cols-3 justify-items-center"

Layout:
- grid: Establishes grid layout
- grid-cols-1: Single column on mobile
- lg:grid-cols-2: Two columns on large screens
- xl:grid-cols-3: Three columns on extra-large screens
Spacing:
- gap-8: Base gap of 2rem (32px)
- md:gap-12: Increases to 3rem (48px) on medium screens
Alignment:
- justify-items-center: Centers cards within their grid areas

Card Wrapper className="group h-[380px] w-[320px] sm:h-[480px] sm:w-96 md:h-96"

Base functionality:
- group: Enables hover state targeting for child elements
Mobile dimensions:
- h-[380px]: Fixed height of 380px
- w-[320px]: Fixed width of 320px
Responsive sizes:
- sm:h-[480px]: Height increases to 480px on small screens
- sm:w-96: Width increases to 24rem on small screens
- md:h-96: Height adjusts to 24rem on medium screens

Key features of our grid:

Starts as single column on mobile (grid-cols-1)
Expands to 2 columns on large screens (lg:grid-cols-2)
Reaches 3 columns on extra-large screens (xl:grid-cols-3)
Consistent gap spacing that increases with screen size
Cards are centered in their grid areas (justify-items-center)

3. Build the Card Container

The card container is where we create our twist effect through multiple coordinated layers. Let's break down each layer and understand their roles:

{/* Card Group Container */}
<div
  key={event.id}
  className="group h-[380px] w-[320px] sm:h-[480px] sm:w-96 md:h-96"
>
  <div className="relative w-full h-full bg-gray-100 rounded-xl shadow-lg transform transition duration-500 ease-in-out hover:scale-110 hover:rotate-12">
    {/* Gradient background layer */}
    <div className="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-r from-orange-400 to-red-500 transform rotate-12 group-hover:rotate-0 group-hover:scale-110 transition duration-500 ease-in-out"></div>
    {/* Content container */}
    <div className="relative flex flex-col justify-center items-center w-full h-full py-6 md:py-8 rounded-xl bg-white">
      {/* Card content will go here */}
    </div>
  </div>
</div>

Let's examine each container and its classes:

Outer Group Container

className="group h-[380px] w-[320px] sm:h-[480px] sm:w-96 md:h-96"

group: Enables hover targeting for nested elements
Base dimensions (mobile):
- h-[380px]: Fixed height
- w-[320px]: Fixed width
Responsive sizing:
- sm:h-[480px] sm:w-96: Larger on tablets
- md:h-96: Adjusted height for desktop

Transform Container

className="relative w-full h-full bg-gray-100 rounded-xl shadow-lg transform transition duration-500 ease-in-out hover:scale-110 hover:rotate-12"

Positioning:
- relative: Creates positioning context
- w-full h-full: Fills parent container
Styling:
- bg-gray-100: Light background
- rounded-xl: Rounded corners
- shadow-lg: Large shadow for depth
Transform properties:
- transform: Enables transform effects
- transition duration-500: Half-second animation
- ease-in-out: Smooth animation curve
- hover:scale-110: 10% size increase on hover
- hover:rotate-12: 12-degree rotation on hover

Gradient Background Layer

className="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-r from-orange-400 to-red-500 transform rotate-12 group-hover:rotate-0 group-hover:scale-110 transition duration-500 ease-in-out"

Positioning:
- absolute top-0 left-0: Positions over parent
- w-full h-full: Matches parent size
Styling:
- rounded-xl: Matches parent rounding
- bg-gradient-to-r: Right-direction gradient
- from-orange-400 to-red-500: Gradient colors
Animation:
- transform rotate-12: Initial rotation
- group-hover:rotate-0: Straightens on hover
- group-hover:scale-110: Matches parent scale
- transition duration-500: Timing match
- ease-in-out: Smooth animation

Content Container

className="relative flex flex-col justify-center items-center w-full h-full py-6 md:py-8 rounded-xl bg-white"

Layout:
- relative: New stacking context
- flex flex-col: Vertical stack
- justify-center items-center: Center content
- w-full h-full: Fill parent
Styling:
- py-6 md:py-8: Responsive padding
- rounded-xl: Rounded corners
- bg-white: White background

The layering creates a coordinated animation where:

The white content layer stays on top
The gradient background rotates independently
All transforms sync through group hover
Transitions match for smooth animation

4. Add the Card Content

Let's build out the interior of our card with the image, title, date, and tags:

{/* Image Container */}
<div className="w-[85%] sm:w-64 h-36 sm:h-48 overflow-hidden rounded-lg mb-4">
 <img
   src={event.image}
   alt={`${event.title} Image`}
   className="w-full h-full object-cover transform transition duration-500 ease-in-out group-hover:scale-105"
 />
</div>

Image container breakdown:

w-[85%] sm:w-64: Responsive width, using percentage on mobile
h-36 sm:h-48: Height increases on larger screens
overflow-hidden: Contains the image scale animation
group-hover:scale-105: Subtle zoom effect on parent hover

Next, let's add the event details:

{/* Event Title */}
<h3 className="text-lg sm:text-xl font-bold text-gray-800 px-4 text-center">
  {event.title}
</h3>

{/* Event Date */}
<p className="text-gray-600 mt-2 px-4 text-center text-sm sm:text-base">
  {event.date}
</p>

Text styling breakdown:

Responsive font sizes using sm: breakpoint
Consistent padding and centering
Color hierarchy with text-gray-800 and text-gray-600

5. Implement the Tag System

Now for our dynamic tag system that handles different states:

<div className="mt-4 flex flex-wrap justify-center items-center gap-2 px-4">
  {event.tags.map((tag, index) => (
    <div
      key={index}
      className={`px-3 sm:px-4 py-1 rounded-full text-xs sm:text-sm ${
        tag === "Sold Out"
          ? "bg-gray-100 text-gray-600"
          : tag === "Limited Seats"
          ? "bg-red-100 text-red-600"
          : "bg-green-100 text-green-600"
      }`}
    >
      {tag}
    </div>
  ))}
</div>

Tag system breakdown:

Flexible container with flex-wrap for multiple tags
Dynamic color coding based on tag type:
- Sold Out: Gray theme
- Limited Seats: Red theme
- Early Bird: Green theme
Responsive padding and font sizes
Rounded-full for pill-shaped appearance

6. Animation Fine-Tuning

The magic of our twist cards comes from carefully coordinated transitions. Let's look at how they work together:

Parent Card Transform: transform transition duration-500 ease-in-out hover:scale-110 hover:rotate-12
Scales up by 10%
Rotates 12 degrees
Smooth 500ms transition
Gradient Background:
transform rotate-12 group-hover:rotate-0 group-hover:scale-110 transition duration-500 ease-in-out

Starts rotated, straightens on hover
Scales with parent
Matches parent transition timing

Image Scale: transform transition duration-500 ease-in-out group-hover:scale-105

Subtle zoom effect
Coordinated with parent hover
Same transition timing for consistency

7. Complete Component

Here's our finished component with all the pieces together:

import React from "react";

const events = [
  {
    id: 1,
    title: "Web Dev Summit 2024",
    date: "Dec 15-17 • San Francisco",
    image:
      "https://images.unsplash.com/photo-1645323927890-ebc1462c12c8?q=80&w=2929&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    tags: ["Limited Seats", "Early Bird"],
  },
  {
    id: 2,
    title: "Design Thinking 2024",
    date: "Jan 15-17 • New York",
    image:
      "https://images.unsplash.com/photo-1645323927890-ebc1462c12c8?q=80&w=2929&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    tags: ["Sold Out", "Sold Out"],
  },
  {
    id: 3,
    title: "Product Management 2024",
    date: "Feb 15-17 • Los Angeles",
    image:
      "https://images.unsplash.com/photo-1645323927890-ebc1462c12c8?q=80&w=2929&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    tags: ["Limited Seats", "Early Bird"],
  },
];

const TwistCard = () => {
  return (
    <section className="py-8 bg-slate-200 mx-auto sm:py-12 md:py-16">
      <div className="container mx-auto px-4">
        <div className="flex justify-center object-center flex-col gap-8 sm:gap-12">
          <h2 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold text-center text-rose-950 tracking-tight pb-8 md:pb-12 lg:pb-20">
            Upcoming Events
          </h2>
          {/* Grid container*/}
          <div className="grid grid-cols-1 gap-8 md:gap-12 lg:grid-cols-2 xl:grid-cols-3 justify-items-center">
            {events.map((event) => (
              <div
                key={event.id}
                className="group h-[380px] w-[320px] sm:h-[480px] sm:w-96 md:h-96"
              >
                <div className="relative w-full h-full bg-gray-100 rounded-xl shadow-lg transform transition duration-500 ease-in-out hover:scale-110 hover:rotate-12">
                  {/* Gradient background layer */}
                  <div className="absolute top-0 left-0 w-full h-full rounded-xl bg-gradient-to-r from-orange-400 to-red-500 transform rotate-12 group-hover:rotate-0 group-hover:scale-110 transition duration-500 ease-in-out"></div>
                  {/* Content container */}
                  <div className="relative flex flex-col justify-center items-center w-full h-full py-6 md:py-8 rounded-xl bg-white">
                    {/* Card content*/}

                    {/* Image Container */}
                    <div className="w-[85%] sm:w-64 h-36 sm:h-48 overflow-hidden rounded-lg mb-4">
                      <img
                        src={event.image}
                        alt={`${event.title} Image`}
                        className="w-full h-full object-cover transform transition duration-500 ease-in-out group-hover:scale-105"
                      />
                    </div>
                    {/* Event Title */}
                    <h3 className="text-lg sm:text-xl font-bold text-gray-800 px-4 text-center">
                      {event.title}
                    </h3>

                    {/* Event Date */}
                    <p className="text-gray-600 mt-2 px-4 text-center text-sm sm:text-base">
                      {event.date}
                    </p>
                    <div className="mt-4 flex flex-wrap justify-center items-center gap-2 px-4">
                      {event.tags.map((tag, index) => (
                        <div
                          key={index}
                          className={`px-3 sm:px-4 py-1 rounded-full text-xs sm:text-sm ${
                            tag === "Sold Out"
                              ? "bg-gray-100 text-gray-600"
                              : tag === "Limited Seats"
                              ? "bg-red-100 text-red-600"
                              : "bg-green-100 text-green-600"
                          }`}
                        >
                          {tag}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default TwistCard;

Recap

By adding interactive elements to your website you can increase user engagement while also providing valuable information to users in an easy to consume manner. If you found this helpful you can visit our site Zephyr Pixels for more tips on web development and Next.js. Cheers 🚀

How To: Interactive Pricing Component with Tailwind CSS

mematthew123 — Sun, 10 Nov 2024 19:21:11 +0000

What are Pricing Toggles?

Pricing toggles are interactive elements that allow users to switch between different billing cycles (typically monthly and annual). When implemented well, they provide clear price comparisons and enhance the user experience of pricing pages.

Benefits of Pricing Toggles
Pricing toggles offer several advantages for your website:

They simplify complex pricing information into an easily digestible format
The interactive toggle encourages user engagement
They effectively highlight potential savings on annual plans
They help users make informed decisions about pricing options
They reduce cognitive load by showing relevant pricing based on user preference

What we are building

Want to see a live demo? Live Demo
Full Code and Repo Full Code Example

In this guide, we'll cover:

How to create a smooth animated toggle switch
Using Tailwind's utility classes for clean, responsive design
Managing pricing state and calculations
Creating consistent pricing cards with feature comparisons
Adding hover animations and transitions

Let's dive in and see how it's done!

Initial Setup

If we haven't already let's go ahead and spin up a new Next.js site site using the command npx create-next-app@latest and selecting Tailwind CSS from the setup instructions.

Next we will install the HeroIcons package npm i @heroicons/react
We will then need to create a new folder called Components. Inside our new folder we will create a new file called PricingToggle.tsx.

1. Basic Component setup
We will want to start by creating a function and passing that to our page.tsx file. Your component should look similar to below:

// PricingToggle.tsx 

const PricingToggle = () => {
return (
<div className="max-w-6xl mx-auto p-6">
<div className="flex flex-col items-center mb-12">
<h1 className="text-3xl font-bold text-center">Pricing Component</h1>
</div>
</div>
);
};

export default PricingToggle;

2. Setting Up Types and Data Structure

Next let's start by defining our TypeScript types and organizing our pricing data structure:

type SupportLevel = "basic" | "priority";

interface Plan {
  name: string;
  monthlyPrice: number;
  annualPrice: number;
  users: string;
  storage: string;
  support: SupportLevel;
  availableFeatures: string[];
}

This gives us a solid foundation for type safety throughout our component.

3. Defining the Plan Data

Let's add our plan data to the component we've created:

import React, { useState } from 'react';

const PricingToggle = () => {
  const [isAnnual, setIsAnnual] = useState(false);

  const baseFeatures = {
    support: {
      basic: 'Basic Support',
      priority: 'Priority Support'
    } as const
  };

  const additionalFeatures = [
    'Email Reports',
    'Advanced Analytics',
    'Custom Domains',
    'API Access',
    'SSO Authentication'
  ];

  const plans: Plan[] = [
    {
      name: 'Basic',
      monthlyPrice: 9,
      annualPrice: 90,
      users: '1 User',
      storage: '10GB Storage',
      support: 'basic',
      availableFeatures: [
        'Email Reports'
      ]
    },
    {
      name: 'Pro',
      monthlyPrice: 29,
      annualPrice: 290,
      users: '5 Users',
      storage: '100GB Storage',
      support: 'priority',
      availableFeatures: [
        'Email Reports',
        'Advanced Analytics',
        'Custom Domains'
      ]
    },
    {
      name: 'Enterprise',
      monthlyPrice: 99,
      annualPrice: 990,
      users: 'Unlimited Users',
      storage: '1TB Storage',
      support: 'priority',
      availableFeatures: [
        'Email Reports',
        'Advanced Analytics',
        'Custom Domains',
        'API Access',
        'SSO Authentication'
      ]
    }
  ];

  return (
    <div className="max-w-6xl mx-auto p-6">
      {/* Content will go here */}
    </div>
  );
};

export default PricingToggle;

Data Structure Explanation

additionalFeatures: Array of all possible features for comparison across plans
plans: Array of Plan objects that follow our TypeScript interface
Each plan includes pricing for both billing periods, enabling easy switching
Features are stored as arrays for flexible rendering and comparison

4. Building the Toggle Switch

Now let's add the toggle switch to our component:

import React, { useState } from 'react';

const PricingToggle = () => {
  const [isAnnual, setIsAnnual] = useState(false);

  const baseFeatures = {
    support: {
      basic: 'Basic Support',
      priority: 'Priority Support'
    } as const
  };

  const additionalFeatures = [
    'Email Reports',
    'Advanced Analytics',
    'Custom Domains',
    'API Access',
    'SSO Authentication'
  ];

  const plans: Plan[] = [
    // ... plans array from previous section
  ];

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="flex flex-col items-center mb-12">
        <h2 className="text-3xl font-bold mb-8">Choose Your Plan</h2>
        <div className="relative flex items-center space-x-3">
          <span className={`text-sm transition-colors duration-200 ${
            !isAnnual ? 'text-blue-600 font-bold' : 'text-gray-600'
          }`}>
            Monthly
          </span>
          <button
            onClick={() => setIsAnnual(!isAnnual)}
            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300"
            style={{ backgroundColor: isAnnual ? '#3B82F6' : '#E5E7EB' }}
            role="switch"
            aria-checked={isAnnual}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-300 ease-in-out ${
                isAnnual ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
          <span className={`text-sm transition-colors duration-200 ${
            isAnnual ? 'text-blue-600 font-bold' : 'text-gray-600'
          }`}>
            Annual <span className="ml-1 text-green-500 text-xs">Save 20%</span>
          </span>
        </div>
      </div>
    </div>
  );
};

export default PricingToggle;

Tailwind Classes Breakdown

Layout Classes:

flex flex-col: Creates a vertical flex container
items-center: Centers children horizontally
mb-12: Adds margin bottom of 3rem
space-x-3: Adds horizontal spacing between flex items

Toggle Button Classes:

h-6 w-11: Sets height (1.5rem) and width (2.75rem)
rounded-full: Creates fully rounded corners
transition-colors duration-300: Smooth color transition over 300ms
translate-x-6/translate-x-1: Moves toggle knob between positions

5. Adding Feature List Helpers

Let's add our helper functions and start building out the feature display:

import React, { useState } from 'react';

const PricingToggle = () => {
  const [isAnnual, setIsAnnual] = useState(false);

  // Previous constants remain the same...

  const getUnavailableFeatures = (plan: Plan) => {
    return additionalFeatures.filter(feature => !plan.availableFeatures.includes(feature));
  };

  const renderFeatureItem = (feature: string, isAvailable: boolean) => (
    <li key={feature} className="flex items-center">
      <svg
        className={`h-4 w-4 mr-3 flex-shrink-0 ${
          isAvailable ? 'text-blue-500' : 'text-gray-300'
        }`}
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path d="M5 13l4 4L19 7" />
      </svg>
      <span className={isAvailable ? 'text-gray-600' : 'text-gray-300'}>
        {feature}
      </span>
    </li>
  );

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="flex flex-col items-center mb-12">
        {/* Toggle switch from previous section */}
      </div>
      {/* We'll add the pricing cards next */}
    </div>
  );
};

export default PricingToggle;

6. Building the Complete Component

Now let's put everything together with the pricing cards grid:

import React, { useState } from 'react';

type SupportLevel = 'basic' | 'priority';

interface Plan {
  name: string;
  monthlyPrice: number;
  annualPrice: number;
  users: string;
  storage: string;
  support: SupportLevel;
  availableFeatures: string[];
}

const PricingToggle = () => {
  const [isAnnual, setIsAnnual] = useState(false);

  const baseFeatures = {
    support: {
      basic: 'Basic Support',
      priority: 'Priority Support'
    } as const
  };

  const additionalFeatures = [
    'Email Reports',
    'Advanced Analytics',
    'Custom Domains',
    'API Access',
    'SSO Authentication'
  ];

  const plans: Plan[] = [
    {
      name: 'Basic',
      monthlyPrice: 9,
      annualPrice: 90,
      users: '1 User',
      storage: '10GB Storage',
      support: 'basic',
      availableFeatures: [
        'Email Reports'
      ]
    },
    {
      name: 'Pro',
      monthlyPrice: 29,
      annualPrice: 290,
      users: '5 Users',
      storage: '100GB Storage',
      support: 'priority',
      availableFeatures: [
        'Email Reports',
        'Advanced Analytics',
        'Custom Domains'
      ]
    },
    {
      name: 'Enterprise',
      monthlyPrice: 99,
      annualPrice: 990,
      users: 'Unlimited Users',
      storage: '1TB Storage',
      support: 'priority',
      availableFeatures: [
        'Email Reports',
        'Advanced Analytics',
        'Custom Domains',
        'API Access',
        'SSO Authentication'
      ]
    }
  ];

  const getUnavailableFeatures = (plan: Plan) => {
    return additionalFeatures.filter(feature => !plan.availableFeatures.includes(feature));
  };

  const renderFeatureItem = (feature: string, isAvailable: boolean) => (
    <li key={feature} className="flex items-center">
      <svg
        className={`h-4 w-4 mr-3 flex-shrink-0 ${isAvailable ? 'text-blue-500' : 'text-gray-300'}`}
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path d="M5 13l4 4L19 7" />
      </svg>
      <span className={isAvailable ? 'text-gray-600' : 'text-gray-300'}>
        {feature}
      </span>
    </li>
  );

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="flex flex-col items-center mb-12">
        <h2 className="text-3xl font-bold mb-8">Choose Your Plan</h2>
        <div className="relative flex items-center space-x-3">
          <span className={`text-sm transition-colors duration-200 ${!isAnnual ? 'text-blue-600 font-bold' : 'text-gray-600'}`}>Monthly</span>
          <button
            onClick={() => setIsAnnual(!isAnnual)}
            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300"
            style={{ backgroundColor: isAnnual ? '#3B82F6' : '#E5E7EB' }}
            role="switch"
            aria-checked={isAnnual}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-300 ease-in-out ${
                isAnnual ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
          <span className={`text-sm transition-colors duration-200 ${isAnnual ? 'text-blue-600 font-bold' : 'text-gray-600'}`}>
            Annual <span className="ml-1 text-green-500 text-xs">Save 20%</span>
          </span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {plans.map((plan) => (
          <div 
            key={plan.name}
            className="relative p-6 bg-white rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
          >
            <div className="space-y-4">
              <h3 className="text-xl font-bold text-gray-900">{plan.name}</h3>

              <div className="flex items-baseline text-gray-900">
                <span className="text-2xl font-semibold">$</span>
                <span className="text-4xl font-bold tracking-tight transition-all duration-300">
                  {isAnnual ? Math.round(plan.annualPrice / 12) : plan.monthlyPrice}
                </span>
                <span className="ml-1 text-sm font-medium text-gray-500">/month</span>
              </div>

              {isAnnual && (
                <p className="text-sm text-green-500">
                  ${plan.annualPrice} billed annually
                </p>
              )}

              <ul className="space-y-3 text-sm">
                {/* Core features */}
                {renderFeatureItem(plan.users, true)}
                {renderFeatureItem(plan.storage, true)}
                {renderFeatureItem(baseFeatures.support[plan.support], true)}

                {/* Available features */}
                {plan.availableFeatures.map(feature => renderFeatureItem(feature, true))}

                {/* Divider if there are unavailable features */}
                {getUnavailableFeatures(plan).length > 0 && (
                  <li className="border-t border-gray-200 my-4"></li>
                )}

                {/* Unavailable features */}
                {getUnavailableFeatures(plan).map(feature => renderFeatureItem(feature, false))}
              </ul>

              <button className="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200">
                Get Started
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PricingToggle;

Understanding the Complete Implementation

Let's break down the key aspects of our final pricing component:

Grid Layout and Responsive Design

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">

Starts as a single column on mobile devices
Expands to three columns on medium screens (768px and up)
Maintains consistent 2rem (32px) gap between cards

Pricing Card Structure

Each card is built with several layers:

<div className="relative p-6 bg-white rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl">

relative positioning for potential overlays or badges
p-6 padding creates comfortable spacing
Subtle shadow and border for depth
Smooth hover animation with scale and enhanced shadow

Price Display

<div className="flex items-baseline text-gray-900">   <span className="text-2xl font-semibold">$</span>  <span className="text-4xl font-bold tracking-tight transition-all duration-300">    {isAnnual ? Math.round(plan.annualPrice / 12) : plan.monthlyPrice}  </span>  <span className="ml-1 text-sm font-medium text-gray-500">/month</span> </div>

Aligned at baseline for clean typography
Larger price with bold weight for emphasis
Smooth transition when switching between billing periods
Clear indication of billing frequency

Feature Organization

Features are organized into three distinct sections:

Core features (users, storage, support)
Available additional features
Unavailable features with reduced opacity

The divider appears only when there are unavailable features:

{getUnavailableFeatures(plan).length > 0 && (   <li className="border-t border-gray-200 my-4"></li> )}

Call-to-Action Button

<button className="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200">

Full width for maximum visibility
Clear hover and focus states for accessibility
Smooth color transition on hover
Focus ring for keyboard navigation

Key Takeaways

State Management: Single isAnnual state controls all pricing calculations and display toggles
Type Safety: TypeScript interfaces ensure consistent data structure
Responsive Design: Mobile-first approach with breakpoints for larger screens
User Experience:
- Smooth transitions for all interactive elements
- Clear visual hierarchy
- Consistent spacing and alignment
- Accessible interactive elements

Zephyr Pixels builds websites and online experiences using Sanity and Next.js. We hope you enjoyed this article and if you found this article helpful, give it like, and follow for more guides and tutorials.

How To: 3D Flip Cards using Tailwind CSS

mematthew123 — Thu, 29 Aug 2024 16:33:50 +0000

What are Flip Cards?

Flip cards are interactive elements that display content on two sides - a front face and back face. When triggered, the card flips to reveal the alternate side, creating an engaging user experience.

Benefits of Flip Cards

Flip cards offer several advantages for engaging users on your website:

They provide an interactive element that encourages users to explore and discover more information
The flipping motion adds a fun, dynamic visual effect that captures attention
Flip cards are an efficient way to present additional content within a limited space
They work well for highlighting key features, services, or products

By implementing flip cards on your site, you can create a more immersive and memorable user experience. Visitors are more likely to engage with your content and spend more time exploring what you have to offer.

What we are building~

Want to see a live demo? Demo

Full Code and Repo Github

In this guide we'll cover: how to use Tailwind's utility classes to style the flip card, including 3D transforms, perspective, and transitions.

We'll start by setting up a new Next.js component for our flip card. Then we'll apply Tailwind classes to style the card faces, handle the flipping animation, and make the cards responsive.

Let's dive in and see how it's done!

If we haven't already let's go ahead and spin up a new Next.js site site using the command npx create-next-app@latest and selecting Tailwind CSS from the setup instructions.

Next we will install the HeroIcons package npm i @heroicons/react

We will then need to create a new folder called 'components'.

Inside of our new components folder we will create a new file FlipCardComponent.jsx

1. Set Up the Section Wrapper

Begin by setting up a basic section element that will wrap the entire component. This section will add padding around the content to ensure it’s well-spaced on the page.



const FlipCardComponent = () => {
  return (
    <section className="py-16 mx-auto sm:py-20">
      {/* Content will go here */}
    </section>
  );
};

export default FlipCardComponent;

py-16 sm:py-20: Adds vertical padding (4rem by default and 5rem on small screens and above), ensuring the section is not cramped against other content.
mx-auto: Centers the section horizontally on the page.

2. Add a Container for Centering Content

Next, add a container inside the section. This container will center the content and adjust its width based on the screen size.



const FlipCardComponent = () => {
  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        {/* Content will go here */}
      </div>
    </section>
  );
};

export default FlipCardComponent;

mx-auto: Centers the container within the section.
flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl: Creates a responsive container with padding, and adjusts its maximum width on large screens to 7xl (80rem).

3. Introduce a Flexbox Wrapper for Vertical Layout

Add a Flexbox wrapper to stack the heading and the grid of service cards vertically. This wrapper will also control the spacing between these elements.



const FlipCardComponent = () => {
  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">
          {/* Heading and grid will go here */}
        </div>
      </div>
    </section>
  );
};

export default FlipCardComponent;

flex justify-center object-center flex-col gap-12 sm:gap-16: Uses Flexbox to stack child elements vertically with a gap of 3rem (4rem on small screens and above).

4. Add the Heading

Let’s add the heading inside the Flexbox wrapper. This heading is styled to adjust its size and color based on screen size.



const FlipCardComponent = () => {
  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">
          <h2 className="text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">
            Services
          </h2>
          {/* Grid will go here */}
        </div>
      </div>
    </section>
  );
};

export default FlipCardComponent;

text-4xl sm:text-5xl lg:text-6xl: Adjusts the font size responsively, from 2.25rem to 3.75rem.
font-semibold: Adds a medium-bold weight to make the heading stand out.
tracking-tight: Slightly reduces letter spacing for a more cohesive look.
text-gray-950: Applies a deep gray color to the text, ensuring high contrast and readability.

5. Create the Grid Layout for Service Cards

Now, we’ll create a grid layout to hold the service cards. This grid will have responsive behavior, adjusting from a single column to three columns on larger screens.



const FlipCardComponent = () => {
  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">
          <h2 className="text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">
            Services
          </h2>
          <div className="mx-auto grid gap-12 space-y-10 md:space-y-0 sm:gap-16 lg:grid-cols-3">
            {/* Service cards will go here */}
          </div>
        </div>
      </div>
    </section>
  );
};

export default FlipCardComponent;

grid gap-12 space-y-10 md:space-y-0 sm:gap-16 lg:grid-cols-3: Sets up a responsive grid. The gap-12 and sm:gap-16 add spacing between grid items. space-y-10 removes space between rows on larger screens (md:space-y-0). On large screens (lg:), the grid switches to three columns.

6. Build the Flip Card Container

We’ll start building the individual service cards, with a container that handles the 3D flip effect.



const FlipCardComponent = () => {
  const services = [
    {
      step: "01",
      name: "Diagnostics",
      imageUrl: "https://images.unsplash.com/photo-1632733711679-529326f6db12?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      description: "State-of-the-art diagnostics to accurately identify vehicle issues.",
    },
    // Other services...
  ];

  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">
          <h2 className="text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">
            Services
          </h2>
          <div className="mx-auto grid gap-12 space-y-10 md:space-y-0 sm:gap-16 lg:grid-cols-3">
            {services.map((service) => (
              <div key={service.name} className="group h-96 w-96 [perspective:1000px]">
                <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
                  {/* Front and back faces will go here */}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default FlipCardComponent;

group h-96 w-96 [perspective:1000px]: Sets up the card container with a 3D perspective and a fixed size of 24rem by 24rem.
relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]:
- relative: Positions the inner container relative to its parent for absolute positioning of child elements.
- h-full w-full: Ensures the inner container fills the outer container completely.
- rounded-xl: Rounds the corners of the card to create a softer, modern look.
- shadow-xl: Applies a large shadow to give the card depth and make it stand out.
- transition-all duration-500: Smooths the transition effects over 0.5 seconds, making the flip more fluid.
- [transform-style:preserve-3d]: Maintains the 3D space for the card elements.
- group-hover:[transform:rotateY(180deg)]: Rotates the card by 180 degrees on hover, creating the flip effect.

7. Add the Front Face of the Card

Let’s add the front face of the card, which will include an image and the service name.



const FlipCardComponent = () => {
  const services = [
    {
      step: "01",
      name: "Diagnostics",
      imageUrl: "https://images.unsplash.com/photo-1632733711679-529326f6db12?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3

&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      description: "State-of-the-art diagnostics to accurately identify vehicle issues.",
    },
    // Other services...
  ];

  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">
          <h2 className="text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">
            Services
          </h2>
          <div className="mx-auto grid gap-12 space-y-10 md:space-y-0 sm:gap-16 lg:grid-cols-3">
            {services.map((service) => (
              <div key={service.name} className="group h-96 w-96 [perspective:1000px]">
                <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
                  {/* Front Face */}
                  <div className="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
                    {service.imageUrl && (
                      <Image
                        className="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                        src={service.imageUrl}
                        alt={service.name}
                        width={320}
                        height={320}
                      />
                    )}
                    <p className="md:my-6 text-2xl">{service.name}</p>
                  </div>
                  {/* Back Face will go here */}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default FlipCardComponent;

absolute inset-0 h-full w-full rounded-xl: Positions the front face absolutely within the card container, ensuring it covers the entire area and aligns perfectly with the back face.
[backface-visibility:hidden]: Hides the front face when it’s rotated out of view during the flip.
object-cover cursor-pointer object-left h-full w-full rounded-xl: Ensures the image covers the entire area, has rounded corners, and is positioned to the left without distortion.
md:my-6 text-2xl: Adds vertical margin and sets the font size for the service name.

8. Add the Back Face of the Card

Now, we’ll add the back face, which will appear when the card is flipped. This face will include a service description and a call-to-action button.



const FlipCardComponent = () => {
  const services = [
    {
      step: "01",
      name: "Diagnostics",
      imageUrl: "https://images.unsplash.com/photo-1632733711679-529326f6db12?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      description: "State-of-the-art diagnostics to accurately identify vehicle issues.",
    },
    // Other services...
  ];

  return (
    <section className="py-16 mx-auto sm:py-20">
      <div className="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">
          <h2 className="text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">
            Services
          </h2>
          <div className="mx-auto grid gap-12 space-y-10 md:space-y-0 sm:gap-16 lg:grid-cols-3">
            {services.map((service) => (
              <div key={service.name} className="group h-96 w-96 [perspective:1000px]">
                <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
                  {/* Front Face */}
                  <div className="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
                    {service.imageUrl && (
                      <Image
                        className="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                        src={service.imageUrl}
                        alt={service.name}
                        width={320}
                        height={320}
                      />
                    )}
                    <p className="md:my-6 text-2xl">{service.name}</p>
                  </div>
                  {/* Back Face */}
                  <div className="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-12 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
                    <div className="flex min-h-full flex-col items-center justify-center">
                      <h2 className="text-2xl font-bold mb-4">{service.name}</h2>
                      <p className="text-lg text-pretty text-center mb-4">
                        {service.description}
                      </p>
                      <a href="tel:555-555-5555" className="inline-flex">
                        <button className="my-2 bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-2 px-4 w-auto rounded-full inline-flex items-center">
                          <span>Schedule Service</span>
                          <WrenchScrewdriverIcon className="h-6 w-6 ml-2" />
                        </button>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default FlipCardComponent;

absolute inset-0 h-full w-full rounded-xl: Same positioning and sizing as the front face to ensure they align perfectly when the card flips.
bg-black/80 px-12 text-center text-slate-200: Applies a semi-transparent black background (80% opacity), adds padding, centers the text, and styles it with a slate color.
[transform:rotateY(180deg)]: Pre-rotates the back face by 180 degrees, so it’s hidden until the card is flipped.
flex min-h-full flex-col items-center justify-center: Creates a flexbox container that vertically centers the content, ensuring the text and button are always centered within the card.
Button Classes:
- my-2 bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-2 px-4 w-auto rounded-full inline-flex items-center: Styles the button with appropriate padding, font size, and hover/focus states to ensure it’s accessible and visually appealing.

9. Final Code

Here’s the full component after all the steps:



import React from "react";

import { WrenchScrewdriverIcon } from "@heroicons/react/20/solid";

import Image from "next/image";

const services = [

  {

    step: "01",

    name: "Diagnostics",

    imageUrl:

      "https://images.unsplash.com/photo-1632733711679-529326f6db12?q=80&amp;w=2940&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",

    description:

      "State-of-the-art diagnostics to accurately identify vehicle issues.",

  },

  {

    step: "02",

    name: "Repairs",

    imageUrl:

      "https://images.unsplash.com/photo-1687462970787-61d953508926?q=80&amp;w=3087&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",

    description:

      "Engine overhauls to brake replacements, we ensure high-quality work for your vehicle’s longevity.",

  },

  {

    step: "03",

    name: "Maintenance",

    imageUrl:

      "https://images.unsplash.com/photo-1635437536607-b8572f443763?q=80&amp;w=2940&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",

    description:

      "Oil changes, tire rotations, and more to enhance performance and prevent future issues.",

  },

];

const FlipCardComponent = () => {

  return (

    <section className="py-16 mx-auto sm:py-20">

      <div class

Name="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">

        <div className="flex justify-center object-center flex-col gap-12 sm:gap-16">

          <h2 className="text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">

            Services

          </h2>

          <div className="mx-auto grid gap-12 space-y-10 md:space-y-0 sm:gap-16 lg:grid-cols-3">

            {services.map((service) => (

              <div key={service.name} className="group h-96 w-96 [perspective:1000px]">

                <div className="relative h-full w-full rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">

                  {/* Front Face /}

                  <div className="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">

                    {service.imageUrl && (

                      <Image

                        className="object-cover cursor-pointer object-left h-full w-full rounded-xl"

                        src={service.imageUrl}

                        alt={service.name}

                        width={320}

                        height={320}

                      />

                    )}

                    <p className="md:my-6 text-2xl">{service.name}</p>

                  </div>

                  {/ Back Face */}

                  <div className="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-12 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">

                    <div className="flex min-h-full flex-col items-center justify-center">

                      <h2 className="text-2xl font-bold mb-4">{service.name}</h2>

                      <p className="text-lg text-pretty text-center mb-4">

                        {service.description}

                      </p>

                      <a href="tel:555-555-5555" className="inline-flex">

                        <button className="my-2 bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-2 px-4 w-auto rounded-full inline-flex items-center">

                          <span>Schedule Service</span>

                          <WrenchScrewdriverIcon className="h-6 w-6 ml-2" />

                        </button>

                      </a>

                    </div>

                  </div>

                </div>

              </div>

            ))}

          </div>

        </div>

      </div>

    </section>

  );

};

export default FlipCardComponent;

Recap

Vendure- The smart Shopify alternative

mematthew123 — Tue, 21 Dec 2021 01:02:22 +0000

Everything you need, nothing you don't

In 2022 online sales are expected to continue to grow 16.1% compared to 2021, which was a record-breaking year in its own right. In-person shopping, however, is expected to remain flat for the foreseeable future. This has led to an influx of online stores opening for the first time as many business owners are seeking to capitalize on the benefits of online selling.

When building an online store for yourself or a client, there are a plethora of options available due to the growing demand. Many clients and business owners want stores that are easy to maintain, built quickly, and are cost-effective. Checking all the boxes on this list is no small task, and many developers and store owners naturally gravitate towards monolithic options such as Shopify or WordPress due to the speed at which they can be built. The issue that many face when using these options is that customization can be non-existent or expensive (Plugins), and they are prone to creating a less than stellar customer service experience.

On the other hand, customers have higher expectations than ever for their online and mobile shopping experiences. Universally consumers prefer their online shopping experience to be effortless and personal.

Headless storefronts can be built on traditionally monolithic platforms however, this often still leaves a person depending on expensive plugins to enable standard back-end features. Other, newer options often come with high monthly charges and/or a percentage of your gross sales. This is a major hurdle for many small businesses that don't have the financial resources to hire a full development team.

An option that I recently discovered that does a better job than either of the two aforementioned options is Vendure.io which is a headless e-commerce framework that is easy to set up, cheap to host ($5 mo), and you won't have to worry about feeling overwhelmed by the admin dashboard (cough cough wp). The admin dashboard is beautiful and intuitive, perfect to hand off to a client. Vendure was developed by Michael Bromley and released in 2019 and just released version 1.4. I am just getting started using Vendure but have highlighted a few aspects that have stood out in my eyes. Down below, I will also show a quick and easy way to get started with Vendure.

Built with..

Typescript
Nestjs
Graphql

Features

- Customizable

In Vendure, this is accomplished easily with a couple of lines of configuration. This is much more involved in other frameworks and can be a costly plugin depending on the platform.
Custom the shopping experience by bringing your storefront. vendure has starters available for Next as well as Vue!
Compatible with multiple payment gateways

- Scalable

Sell an unlimited amount of products
Marketplace capable
Multi-Tenant capable
Amazing support and community

- Cost-effective

Open-source
Deployment on the digital ocean is around 5 a month
No additional fees for using preferred payment gateway

- Approachable

Easy to set up in an afternoon
Easy to navigate and preconfigured dashboard
Advanced image control
Storefront starters

Let's get started

Step .5: Prerequisites
Basic understanding of TypeScript
Basic understanding of Node.js
Basic understanding of GraphQL
Basic understanding of SQL and databases

Keep in mind that this is a beginner's guide and setup, that does not go into the full capabilities of Vendure.io.

~#~#~#~#~#~#~#~
If you are new to the world of Node.js, Node.js.
If you are new to GraphQL, GraphQL.
If you are new to SQL, SQL.
If you are new to the world of TypeScript, TypeScript.
~#~#~#~#~#~#~#~

Here we go!

Step 1: Open a new terminal window enter the following command

npx @vendure/create my-app

Step 2: Choose a Database- for this tutorial we will be using an SQLite database.

Step 3: Choose a Language- for this tutorial we will be using TypeScript

Step 4: Sample Data? Yes, please

Step 5: User name and Password? We will use the default settings provided which is superadmin/superadmin. This can be changed later in the dashboard

Step 6: Run the command

    cd my-app
    yarn start

Step 7: Since the previous step will take a couple of minutes, this is a good time to get up stretch, grab a ~~beer~~ coffee, and congratulate yourself on setting up your Vendure server

Nice work! You should now be able to access the following

The Vendure Admin GraphQL API: http://localhost:3000/admin-api
The Vendure Shop GraphQL API: http://localhost:3000/shop-api
The Vendure Admin UI: http://localhost:3000/admin

But what does it mean...?

Admin GraphQL API: http://localhost:3000/admin-api = Store permissions
GraphQL API: http://localhost:3000/shop-api = Putting items on the shelves and general store operations
Admin UI: http://localhost:3000/admin= View from the bosses desk
(high five!)

Creating a storefront

There are two popular integrations available at the moment: Vue and Next
Since I like Next over Vue~ Let's set up the Next js storefront

Step 1. Verify that the Vendure server is set up for cookies and not bearer tokens

Step 2. Fork and then clone this repo https://github.com/vercel/commerce
Step 3. NPM install and then create a .env.local file at the root of the project and add the following

    COMMERCE_PROVIDER=vendure
NEXT_PUBLIC_VENDURE_SHOP_API_URL=http://localhost:3000/shop-api 
NEXT_PUBLIC_VENDURE_LOCAL_URL=/vendure-shop-api

Step 4. Let's now double-check our tsconfig.json file and make sure that the correct framework is set up. It should show Vendure as the framework of choice, replacing "local" on lines 26 through 30.

    "@components/*": ["components/*"],
    "@commerce": ["framework/commerce"],
    "@commerce/*": ["framework/commerce/*"],
    "@framework": ["framework/vendure"],
    "@framework/*": ["framework/vendure/*"]

Step 5. In your terminal enter the command "npm run dev" to start your storefront

You should now see a fully populated store full of demo items. Let's go ahead and verify connectivity by going to our Vendure admin dashboard. Once signed we can add products and collections.

If we go back and check out our storefront we should see any new categories we created listed in the navbar, and a quick search should bring up any new products that are not displayed on the landing page.

The Next js storefront comes with Tailwind CSS installed. The only thing left to do is add your personal touch!

TA-DA YOU ARE FINISHED

If you have any questions about setting up Vendure, the Slack channel is full of helpful and knowledgeable people: https://vendure-ecommerce.slack.com.

Check out my new newest endeavor:
Zephyr Pixels hand-coded websites(https://zephyrpixels.dev)