Tailwind CSS Line Clamp

export default function MultiLineClamp() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
      <div className="max-w-xs h-80 p-4 bg-white shadow-md rounded-md">
        <img
          className="w-full h-48 object-cover rounded-t-md"
          src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
          alt="Content preview"
        />
        <p className="line-clamp-4 text-gray-800 mt-3">
          Tailwind CSS provides utility-first classes designed to simplify
          crafting web interfaces. Here, we demonstrate how line clamping
          works in a real-world card layout. Using the `line-clamp-4` utility,
          the paragraph truncates to three lines, ensuring consistent
          designs while enhancing readability and aesthetics.
        </p>
      </div>
    </div>
  );
}

export default function DynamicClamp() {
  const showFullText = true; // toggle this flag for different behavior
  
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <div className="max-w-sm p-6">
        <p className={showFullText ? "text-gray-900 line-clamp-none" : "line-clamp-6 text-gray-700"}>
          Tailwind’s line clamping is incredibly flexible for scenarios where
          dynamic behavior is required. Flip the `showFullText` flag to see how
          clamping can be toggled off or on based on interaction preferences. This 
          approach also minimizes the repetitive configuration of CSS or JavaScript.
        </p>
      </div>
    </div>
  );
}

export default function ClampOnHover() {
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <div className="max-w-md p-4">
        <p className="line-clamp-2 hover:line-clamp-none transition-all">
          Hover over this text to dynamically expand the content. Tailwind allows you
          to seamlessly integrate state-based modifiers across styles—for instance,
          removing line truncation when users hover over the paragraph, providing full
          contextual visibility.
        </p>
      </div>
    </div>
  );
}

export default function ResponsiveClamp() {
  return (
    <div className="h-screen w-screen flex items-center justify-center p-4">
      <p className="text-lg sm:line-clamp-1 md:line-clamp-2 lg:line-clamp-4">
        "At smaller breakpoints, this text is restricted to one line, allowing
        critical information to take precedence. As the viewport grows, more
        lines gradually become visible, improving user engagement without sacrificing
        layout integrity or effectiveness on larger screens."
      </p>
    </div>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomClamp() {
  return (
    <div className="h-screen w-screen flex justify-center items-center p-6">
      <p className="line-clamp-7">
        With the custom `lineClamp` value in your Tailwind config, you're equipped
        to define unique truncation rules that go beyond defaults.
        Experiment with values that align with your design needs, all while
        maintaining Tailwind's renowned utility-first approach! This paragraph will not exceed the 7th line.
      </p>
    </div>
  );
}

export default function ArbitraryClamp() {
  return (
    <div className="h-screen w-screen flex items-center justify-center p-5">
      <p className="line-clamp-[4] text-center">
        Tailwind’s arbitrary styles empower you to assign custom line-clamp
        values directly in class names. This approach removes the dependency on
        additional configuration steps while keeping your design logic flexible
        and application-ready.
      </p>
    </div>
  );
}

export default function BlogPreviewGrid() {
  const blogPosts = [
    {
      id: 1,
      title: "Understanding Modern JavaScript Development",
      description: "Explore the latest features in JavaScript ES2022, including top-level await, RegExp match indices, and new class elements. Learn how these additions can improve your code quality and development workflow in practical applications.",
      image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479",
      author: "Sarah Chen",
      date: "2023-10-15"
    },
    {
      id: 2,
      title: "Building Scalable Microservices Architecture",
      description: "Deep dive into microservices architecture patterns, service discovery, load balancing, and fault tolerance. Understand how to design resilient distributed systems that can handle millions of requests.",
      image: "https://images.unsplash.com/photo-1623479322729-28b25c16b011",
      author: "Mike Johnson",
      date: "2023-10-14"
    },
    // ... Add 4 more similar items
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {blogPosts.map((post) => (
        <div key={post.id} className="bg-white rounded-lg shadow-md overflow-hidden">
          <img 
            src={post.image} 
            alt={post.title}
            className="w-full h-48 object-cover"
          />
          <div className="p-4">
            <h3 className="text-xl font-bold line-clamp-1">{post.title}</h3>
            <p className="text-gray-600 mt-2 line-clamp-3">{post.description}</p>
            <div className="mt-4 flex justify-between items-center">
              <span className="text-sm text-gray-500">{post.author}</span>
              <span className="text-sm text-gray-500">{post.date}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Wireless Headphones",
      description: "Experience crystal-clear audio with our premium wireless headphones. Features active noise cancellation, 40-hour battery life, and premium leather cushions for maximum comfort during extended listening sessions.",
      price: 299.99,
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      rating: 4.8,
      reviews: 256
    },
    // ... Add 5 more products
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        {products.map((product) => (
          <div key={product.id} className="bg-white rounded-xl p-6 shadow-lg">
            <div className="relative aspect-square mb-4">
              <img
                src={product.image}
                alt={product.name}
                className="absolute w-full h-full object-cover rounded-lg"
              />
            </div>
            <h3 className="text-lg font-semibold line-clamp-1">{product.name}</h3>
            <p className="text-gray-600 mt-2 text-sm line-clamp-2">
              {product.description}
            </p>
            <div className="mt-4 flex justify-between items-center">
              <span className="text-2xl font-bold">${product.price}</span>
              <div className="flex items-center">
                <span className="text-yellow-400">★</span>
                <span className="ml-1 text-sm">{product.rating}</span>
                <span className="ml-1 text-sm text-gray-500">
                  ({product.reviews})
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function NewsFeed() {
  const newsItems = [
    {
      id: 1,
      title: "Breaking: Major Technology Breakthrough",
      content: "Scientists have achieved a groundbreaking discovery in quantum computing, potentially revolutionizing the way we process information. The new quantum processor can perform calculations in microseconds that would take traditional computers thousands of years to complete. This development could have far-reaching implications for cryptography, drug discovery, and climate modeling.",
      image: "https://images.unsplash.com/photo-1518770660439-4636190af475",
      source: "Tech Weekly",
      timestamp: "2 hours ago"
    },
    // ... Add 5 more news items
  ];

  return (
    <div className="max-w-3xl mx-auto p-4">
      {newsItems.map((item) => (
        <div key={item.id} className="mb-8 bg-white rounded-lg shadow-md overflow-hidden">
          <img
            src={item.image}
            alt={item.title}
            className="w-full h-64 object-cover"
          />
          <div className="p-6">
            <h2 className="text-2xl font-bold mb-2 line-clamp-2">{item.title}</h2>
            <p className="text-gray-700 line-clamp-3 mb-4">{item.content}</p>
            <button className="text-blue-600 hover:underline">
              Read More
            </button>
            <div className="mt-4 flex items-center text-sm text-gray-500">
              <span>{item.source}</span>
              <span className="mx-2">•</span>
              <span>{item.timestamp}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function TeamDirectory() {
  const teamMembers = [
    {
      id: 1,
      name: "Dr. Alexandra Thompson",
      role: "Chief Technology Officer",
      bio: "Dr. Thompson has over 15 years of experience in software architecture and machine learning. She previously led AI initiatives at major tech companies and has published numerous papers on distributed systems and neural networks. She holds a Ph.D. in Computer Science from Stanford University.",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      contact: "alexandra.t@company.com"
    },
    // ... Add 5 more team members
  ];

  return (
    <div className="bg-gray-50 p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {teamMembers.map((member) => (
          <div key={member.id} className="bg-white rounded-lg shadow-md p-6">
            <div className="flex flex-col items-center">
              <img
                src={member.image}
                alt={member.name}
                className="w-32 h-32 rounded-full object-cover mb-4"
              />
              <h3 className="text-xl font-semibold text-center line-clamp-1">
                {member.name}
              </h3>
              <p className="text-blue-600 mb-2">{member.role}</p>
              <p className="text-gray-600 text-center line-clamp-4">
                {member.bio}
              </p>
              <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                Contact
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function RecipeGallery() {
  const recipes = [
    {
      id: 1,
      title: "Mediterranean Quinoa Bowl",
      description: "A healthy and delicious bowl packed with protein and fresh vegetables",
      image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      prepTime: "20 mins",
      cookTime: "15 mins",
      ingredients: "Quinoa, Cherry Tomatoes, Cucumber, Kalamata Olives, Feta Cheese, Red Onion, Extra Virgin Olive Oil, Lemon Juice, Fresh Herbs",
      instructions: "1. Cook quinoa according to package instructions. 2. Chop all vegetables. 3. Mix vegetables with cooked quinoa. 4. Add crumbled feta cheese. 5. Drizzle with olive oil and lemon juice. 6. Season with salt and pepper to taste.",
      difficulty: "Easy",
      servings: 4
    },
    // ... Add 5 more recipes
  ];

  return (
    <div className="bg-white p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
        {recipes.map((recipe) => (
          <div key={recipe.id} className="border rounded-xl overflow-hidden shadow-lg">
            <img
              src={recipe.image}
              alt={recipe.title}
              className="w-full h-64 object-cover"
            />
            <div className="p-6">
              <h3 className="text-xl font-bold mb-2 line-clamp-1">
                {recipe.title}
              </h3>
              <p className="text-gray-600 mb-4 line-clamp-2">
                {recipe.description}
              </p>
              <div className="mb-4">
                <h4 className="font-semibold mb-1">Ingredients:</h4>
                <p className="text-gray-600 text-sm line-clamp-2">
                  {recipe.ingredients}
                </p>
              </div>
              <div className="mb-4">
                <h4 className="font-semibold mb-1">Instructions:</h4>
                <p className="text-gray-600 text-sm line-clamp-3">
                  {recipe.instructions}
                </p>
              </div>
              <div className="flex justify-between text-sm text-gray-500">
                <span>Prep: {recipe.prepTime}</span>
                <span>Cook: {recipe.cookTime}</span>
                <span>Serves: {recipe.servings}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function BlogCard() {
  return (
    <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
      <div className="md:flex">
        <div className="p-8">
          <img 
            src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
            alt="Coding"
            className="w-full h-48 object-cover rounded-lg"
          />
          <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold mt-4">
            Technology
          </div>
          <h2 className="block mt-1 text-xl font-medium text-black">
            Understanding the Fundamentals of Modern Web Development and Its Impact on Future Technologies
          </h2>
          <p className="mt-2 text-gray-500 line-clamp-blog-excerpt">
            Explore the core concepts of web development, from responsive design to progressive enhancement. 
            Learn how modern frameworks are shaping the future of web applications and why understanding 
            these principles is crucial for every developer in today's digital landscape.
          </p>
        </div>
      </div>
    </div>
  )
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
import { useState } from 'react'

export default function ProductCard() {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <div className="max-w-sm mx-auto bg-white rounded-lg shadow-lg p-6">
      <img 
        src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
        alt="Product"
        className="w-full h-64 object-cover rounded-md"
      />
      <h2 className="text-2xl font-bold mt-4">Premium Running Shoes</h2>
      <div className="mt-2">
        <p className={`text-gray-600 ${isExpanded ? '' : 'line-clamp-product'}`}>
          Experience ultimate comfort with our revolutionary cushioning technology. 
          These premium running shoes feature advanced moisture-wicking materials, 
          ergonomic design for optimal support, and durable construction for 
          long-lasting performance. The innovative sole design provides superior 
          grip on various surfaces, while the breathable mesh upper ensures 
          proper ventilation during intense workouts.
        </p>
        <button 
          onClick={() => setIsExpanded(!isExpanded)}
          className="mt-2 text-blue-600 hover:text-blue-800 font-medium"
        >
          {isExpanded ? 'Show Less' : 'Read More'}
        </button>
      </div>
    </div>
  )
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function NewsFeed() {
  const newsItems = [
    {
      title: "Breaking Technology News",
      image: "https://images.unsplash.com/photo-1519389950473-47ba0277781c",
      content: "In a groundbreaking development, researchers have announced a major breakthrough in quantum computing technology. The new discovery promises to revolutionize the way we process information, potentially solving complex problems that were previously impossible to tackle with traditional computing methods. This advancement could have far-reaching implications for cryptography, drug discovery, and climate modeling."
    },
    {
      title: "Industry Updates",
      image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa",
      content: "Major tech companies are joining forces to establish new standards for artificial intelligence development. This collaborative effort aims to ensure responsible AI growth while addressing concerns about ethics and safety. The initiative will focus on creating transparent guidelines for AI deployment across various sectors."
    }
  ]

  return (
    <div className="max-w-2xl mx-auto space-y-6 p-4">
      {newsItems.map((item, index) => (
        <div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden">
          <img 
            src={item.image}
            alt={item.title}
            className="w-full h-48 object-cover"
          />
          <div className="p-6">
            <h3 className="text-xl font-bold text-gray-900 mb-2">
              {item.title}
            </h3>
            <p className="text-gray-600 line-clamp-mobile md:line-clamp-tablet lg:line-clamp-desktop">
              {item.content}
            </p>
          </div>
        </div>
      ))}
    </div>
  )
}