Tailwind CSS Text Decoration Style

import React from 'react';

export default function TextDecorationStyles() {
  return (
    <div className="flex flex-col items-center justify-center h-screen w-screen bg-gray-100">
      <h1 className="text-2xl font-bold">Tailwind CSS Text Decorations</h1>
      <p className="underline underline-offset-4 decoration-solid text-lg text-gray-800 mt-4">
        This is a **solid underline** with offset customization!
      </p>
      <p className="underline decoration-wavy text-lg text-gray-700 mt-4">
        Here you can see a **wavy underline** applied!
      </p>
      <p className="line-through decoration-dashed text-lg text-gray-600 mt-4">
        A **dashed line** below strikethrough.
      </p>
    </div>
  );
}
// Tailwind utilities used: underline, underline-offset-4, decoration-wavy, decoration-solid, line-through
// These directly modify text styling according to the desired decoration style.

import React from 'react';

export default function HoverStyles() {
  return (
    <div className="flex flex-col items-center justify-center h-screen w-screen">
      <a
        href="#"
        className="text-blue-600 underline hover:decoration-wavy focus:decoration-dotted text-lg"
      >
        Hover over this text for **wavy underline**
      </a>
      <a
        href="#"
        className="line-through decoration-dotted focus:decoration-solid text-lg mt-4 text-gray-800"
      >
        Focus here to see the "**solid decoration**"
      </a>
    </div>
  );
}
// Tailwind dynamic utilities used: hover:decoration-wavy, focus:decoration-dotted, focus:decoration-solid
// Modify text decoration based on user interaction like focus or hover.

import React from 'react';

export default function ResponsiveDecorations() {
  return (
    <div className="flex flex-col items-center justify-center h-screen w-screen">
      <p className="underline md:decoration-dotted lg:line-through text-lg">
        **Solid underline** becomes **dotted** on medium, and **line-through** on large screens.
      </p>
      <p className="text-lg underline-offset-2 sm:decoration-wavy xl:decoration-dashed mt-4">
        This decoration transforms from **wavy on small screens** to **dashed above large screens**.
      </p>
    </div>
  );
}
// Responsive breakpoints applied: md, lg, sm, xl
// Tailwind utilities dynamically modify styles for adaptive text decoration capability.

export default function ProductFeatures() {
  const features = [
    { id: 1, title: "Cloud Storage", description: "Unlimited secure storage" },
    { id: 2, title: "Real-time Sync", description: "Instant updates across devices" },
    { id: 3, title: "Team Collaboration", description: "Work together seamlessly" },
    { id: 4, title: "Version Control", description: "Track all document changes" },
    { id: 5, title: "Advanced Security", description: "Enterprise-grade encryption" },
    { id: 6, title: "24/7 Support", description: "Round-the-clock assistance" }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h2 className="text-3xl font-bold mb-8">Product Features</h2>
      <div className="grid grid-cols-2 gap-6">
        {features.map((feature) => (
          <div key={feature.id} className="p-4 border rounded-lg hover:shadow-lg transition-all">
            <h3 className="text-xl font-semibold group">
              <span className="decoration-blue-500 decoration-2 hover:underline hover:decoration-wavy">
                {feature.title}
              </span>
            </h3>
            <p className="mt-2 text-gray-600">{feature.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function ReadingList() {
  const books = [
    { id: 1, title: "The Design of Everyday Things", author: "Don Norman", isRead: true },
    { id: 2, title: "Clean Code", author: "Robert C. Martin", isRead: false },
    { id: 3, title: "Atomic Habits", author: "James Clear", isRead: true },
    { id: 4, title: "Deep Work", author: "Cal Newport", isRead: false },
    { id: 5, title: "The Pragmatic Programmer", author: "Andy Hunt", isRead: false },
    { id: 6, title: "Refactoring", author: "Martin Fowler", isRead: true }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h2 className="text-2xl font-bold mb-6">My Reading List</h2>
      <ul className="space-y-4">
        {books.map((book) => (
          <li key={book.id} className="flex items-center justify-between p-3 bg-gray-50 rounded">
            <div>
              <h3 className={`text-lg ${book.isRead ? 'line-through decoration-dotted decoration-red-500 decoration-2' : ''}`}>
                {book.title}
              </h3>
              <p className="text-gray-600">{book.author}</p>
            </div>
            <span className={`px-3 py-1 rounded ${book.isRead ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
              {book.isRead ? 'Completed' : 'Pending'}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function RecipeSteps() {
  const recipe = {
    title: "Classic Tiramisu",
    steps: [
      { id: 1, text: "Brew strong coffee and let it cool", isImportant: true },
      { id: 2, text: "Mix mascarpone with egg yolks and sugar", isImportant: true },
      { id: 3, text: "Whip egg whites until stiff peaks form", isImportant: false },
      { id: 4, text: "Dip ladyfingers in coffee mixture", isImportant: true },
      { id: 5, text: "Layer soaked ladyfingers with cream", isImportant: false },
      { id: 6, text: "Refrigerate for at least 4 hours", isImportant: true }
    ],
    image: "https://images.unsplash.com/photo-1571877227200-a0d98ea607e9"
  };

  return (
    <div className="max-w-3xl mx-auto p-6">
      <h2 className="text-3xl font-bold mb-6">{recipe.title}</h2>
      <img 
        src={recipe.image} 
        alt="Tiramisu"
        className="w-full h-64 object-cover rounded-lg mb-6"
      />
      <ol className="space-y-4">
        {recipe.steps.map((step) => (
          <li key={step.id} className="flex items-center space-x-4">
            <span className="w-8 h-8 flex items-center justify-center bg-gray-200 rounded-full">
              {step.id}
            </span>
            <p className={`text-lg ${step.isImportant ? 'underline decoration-double decoration-amber-500 decoration-2' : ''}`}>
              {step.text}
            </p>
          </li>
        ))}
      </ol>
    </div>
  );
}

export default function PriceComparison() {
  const products = [
    { id: 1, name: "Premium Headphones", originalPrice: 299, salePrice: 199, savings: 100 },
    { id: 2, name: "Wireless Keyboard", originalPrice: 159, salePrice: 129, savings: 30 },
    { id: 3, name: "4K Monitor", originalPrice: 599, salePrice: 499, savings: 100 },
    { id: 4, name: "Gaming Mouse", originalPrice: 89, salePrice: 69, savings: 20 },
    { id: 5, name: "USB-C Hub", originalPrice: 79, salePrice: 59, savings: 20 },
    { id: 6, name: "Mechanical Keyboard", originalPrice: 199, salePrice: 149, savings: 50 }
  ];

  return (
    <div className="max-w-3xl mx-auto p-8">
      <h2 className="text-2xl font-bold mb-6">Special Offers</h2>
      <div className="space-y-4">
        {products.map((product) => (
          <div key={product.id} className="flex items-center justify-between p-4 bg-white shadow rounded">
            <h3 className="text-xl">{product.name}</h3>
            <div className="text-right">
              <p className="text-gray-500 line-through decoration-red-500">${product.originalPrice}</p>
              <p className="text-2xl font-bold text-green-600">${product.salePrice}</p>
              <p className="text-sm underline decoration-dotted decoration-2 decoration-blue-500">
                Save ${product.savings}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function EventTimeline() {
  const events = [
    { id: 1, date: "2024-01-15", title: "Product Launch", location: "San Francisco", type: "Major" },
    { id: 2, date: "2024-02-01", title: "Developer Conference", location: "New York", type: "Major" },
    { id: 3, date: "2024-02-15", title: "Workshop", location: "London", type: "Minor" },
    { id: 4, date: "2024-03-01", title: "Hackathon", location: "Berlin", type: "Major" },
    { id: 5, date: "2024-03-15", title: "Tech Meetup", location: "Tokyo", type: "Minor" },
    { id: 6, date: "2024-04-01", title: "Annual Summit", location: "Singapore", type: "Major" }
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h2 className="text-3xl font-bold mb-8">Upcoming Events</h2>
      <div className="space-y-6">
        {events.map((event) => (
          <div key={event.id} className="flex items-center space-x-6 p-4 border-l-4 border-blue-500">
            <div className="w-48">
              <p className={`text-lg font-semibold ${
                event.type === 'Major' ? 'decoration-wavy decoration-blue-500 underline decoration-2' : ''
              }`}>
                {new Date(event.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}
              </p>
            </div>
            <div>
              <h3 className="text-xl font-bold">{event.title}</h3>
              <p className="text-gray-600">{event.location}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function BalancedLayout() {
  return (
    <div className="p-8">
      <h1 className="text-4xl text-center font-bold underline decoration-wavy decoration-blue-500">
        Join Our Newsletter!
      </h1>
      <p className="text-xl text-center mt-4 mb-8">
        Stay updated with the latest trends in development and design.
      </p>
      <div className="text-center">
        <button className="bg-blue-600 text-white px-4 py-2 rounded hover:underline hover:decoration-dotted">
          Sign Up Now
        </button>
      </div>
    </div>
  );
}

export default function AccessibleNavigation() {
  return (
    <div className="bg-white p-6 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold underline decoration-2 decoration-blue-500">
        Accessible Navigation Tips
      </h2>
      <ul className="mt-4 space-y-3 pl-6 list-disc">
        <li className="text-gray-700 decoration-dotted underline-offset-2">
          Highlight active links with underlines for better tracking.
        </li>
        <li className="text-gray-700">
          Use `hover:underline` selectively to emphasize interactive components.
        </li>
        <li
          className="text-gray-700 decoration-wavy decoration-red-500"
        >
          Avoid over-styling text crucial for comprehension.
        </li>
      </ul>
    </div>
  );
}

export default function InteractiveAccessibility() {
  return (
    <div className="p-8">
      <p className="mt-4 text-gray-600">
        Navigable elements like buttons improve accessibility with clear feedback mechanisms.
      </p>
       <p
        className="py-4 hover:underline hover:decoration-wavy"
      >
        Click here to apply
      </p>
    </div>
  );
}

export default function NestedTextStyles() {
  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-2xl underline decoration-blue-500">Main Header</h1>
      <div className="space-y-3 mt-4">
        <p className="text-gray-700 decoration-solid underline-offset-4">
          Nested text sometimes overrides outermost configurations unnecessarily.
        </p>
        <p className="underline underline-offset-4 decoration-dotted text-gray-600">
          `isolation-auto` ensures nesting avoids style collisions!
        </p>
      </div>
    </div>
  );
}