DEV Community

Cover image for Dynamic Head-Out Image Box Using React + Tailwind CSS
Hayyan Hami
Hayyan Hami

Posted on • Originally published at hayyaun.ir

1

Dynamic Head-Out Image Box Using React + Tailwind CSS

Need a quick UI boost? 🚀 Here’s a simple React + Tailwind CSS snippet to create a stylish Head-Out Image Box.

Hayyaun Head-out

Code

// HeadOutImage.tsx
interface IProps {
  alt: string;
  src: string;
}

export default function HeadOutImage({ alt, src }: IProps) {
  return (
    <div className="group aspect-[7/9] h-auto w-full flex-[0_0_auto] self-start overflow-hidden border-b-2 border-white pt-20">
      <div className="size-full border-2 border-b-0 border-white bg-red-400/0 transition-colors duration-500 group-hover:bg-red-400/85" />
      <Image
        alt={alt}
        src={src}
        className="absolute -bottom-24 h-auto w-full border-2 border-transparent transition-all duration-500 ease-in-out group-hover:-bottom-20"
      />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Using group class and modifier, we can achieve cool effects as above. Copy, paste, done! 🖼️✨ You can also adjust displacement and customize it in a way you like!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay