Tailwind Trials

A React application built with Vite and Tailwind CSS to showcase different styled quote boxes displaying inspirational quotes from notable figures in technology and programming.

Features

• Three Unique Quote Box Designs: Demonstrates various Tailwind CSS styling techniques for displaying quotes with different layouts and color schemes.
• Responsive Design: Uses Tailwind's utility classes for flexible, responsive layouts.
• Modular Components: Built with reusable React components including QuoteBox variants and a customizable FancyButton.

Components

• App.jsx: Main application component that renders three quote boxes with sample quotes.
• QuoteBox1.jsx: Features a cyan-themed design with the quote text in a colored header and author/bio in a light footer.
• QuoteBox2.jsx: Displays author information on the left in a blue panel, with the quote text in a rounded container on the right.
• QuoteBox3.jsx: Speech bubble-style design with rose-colored background and a bordered footer for author details.
• FancyButton.jsx: A customizable button component with optional large styling.

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd tailwind-trials

2. Install dependencies:

   npm install

Running the Application

Start the development server:

npm run dev

Open http://localhost:5173 in your browser to view the application.

Building for Production

Build the project:

npm run build

Preview the production build:

npm run preview

Linting

Run ESLint to check for code quality issues:

npm run lint

Technologies Used

• React 19: For building the user interface
• Vite: Fast build tool and development server
• Tailwind CSS 4: Utility-first CSS framework for styling
• ESLint: For code linting and maintaining code quality

Project Structure

tailwind-trials/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.jsx
│   ├── App.css
│   ├── FancyButton.jsx
│   ├── QuoteBox1.jsx
│   ├── QuoteBox2.jsx
│   ├── QuoteBox3.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
├── eslint.config.js
└── README.md

Customization

• Modify the quotes in App.jsx to display different content.
• Adjust Tailwind classes in the QuoteBox components to change colors, sizes, and layouts.
• Extend the FancyButton component for additional styling options.