why chose us

Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

This tailwind example is contributed by Abdul Jabbar Al Nahid, on 26-Oct-2025. Component is made with Tailwind v3.4. It is responsive.

Other

Author Abdul Jabbar Al Nahid

Tailwind v3.4 866 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Why Choose Us — Static</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  
  
  <style>
    /* Minimal fallback grid + spacing if Tailwind isn't present.
       You can remove this when using Tailwind. */
    .max-w-6xl { max-width: 96rem; margin-left:auto; margin-right:auto; }
    .mx-auto { margin-left:auto; margin-right:auto; }
    .py-16 { padding-top:4rem; padding-bottom:4rem; }
    .p-6 { padding:1.5rem; }
    .min-h-screen { min-height:100vh; }
    .text-center { text-align:center; }
    .mb-20 { margin-bottom:5rem; }
    .inline-block { display:inline-block; }
    .px-4 { padding-left:1rem; padding-right:1rem; }
    .py-1\.5 { padding-top:.375rem; padding-bottom:.375rem; }
    .text-xs { font-size:.75rem; }
    .font-semibold { font-weight:600; }
    .tracking-wider { letter-spacing:.05em; }
    .uppercase { text-transform:uppercase; }
    .rounded-full { border-radius:9999px; }
    .text-4xl { font-size:2.25rem; line-height:1.1; }
    .md\:text-5xl { font-size:3rem; } /* usable when you have responsive rules */
    .font-bold { font-weight:700; }
    .max-w-2xl { max-width:42rem; margin-left:auto; margin-right:auto; }
    .mt-6 { margin-top:1.5rem; }
    .text-muted-foreground { color: #6b7280; } /* gray fallback */
    .grid { display:grid; }
    .grid-cols-1 { grid-template-columns:1fr; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .gap-8 { gap:2rem; }
    .rounded-xl { border-radius:.75rem; }
    .p-8 { padding:2rem; }
    .border { border:1px solid #e5e7eb; }
    .overflow-hidden { overflow:hidden; }
    .bg-card { background: #fff; }
    .w-14 { width:3.5rem; }
    .h-14 { height:3.5rem; }
    .rounded-lg { border-radius:.5rem; }
    .flex { display:flex; }
    .items-center { align-items:center; }
    .justify-center { justify-content:center; }
    .mb-6 { margin-bottom:1.5rem; }
    .text-xl { font-size:1.25rem; }
    .mt-6 { margin-top:1.5rem; }
    .pt-6 { padding-top:1.5rem; }
    .border-t { border-top:1px solid #e5e7eb; }
    .inline-block.px-3.py-1 { display:inline-block; padding:.25rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:600; background:#eef2ff; color:#4f46e5; }
    /* small shadow simulation */
    .shadow-glow { box-shadow: 0 6px 24px rgba(79,70,229,0.08); }
  </style>
</head>
<body class="bg-background">
  <section class="bg-background min-h-screen p-6">
    <div class="max-w-6xl mx-auto py-16">
      
      <div class="text-center mb-20">
        <span class="inline-block px-4 py-1.5 text-xs font-semibold tracking-wider uppercase text-primary bg-primary/10 rounded-full">
          WHY CHOOSE US
        </span>

<h2 class="text-4xl md:text-5xl font-bold mt-4">The Best Way to Prepare</h2>

<p class="max-w-2xl mx-auto mt-6 text-muted-foreground">
          Our features are designed to provide a comprehensive and effective learning experience.
        </p>
      </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<article class="group relative rounded-xl p-8 border overflow-hidden bg-card shadow-glow">
          <div class="relative z-10">
            <div class="w-14 h-14 rounded-lg bg-background flex items-center justify-center mb-6" aria-hidden="true">
              
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 7h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <path d="M7 11l3 3 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>

<h3 class="text-xl font-bold mb-3">Official BRTA Content</h3>
            <p class="text-muted-foreground">Study with confidence using questions and signs sourced directly from official BRTA materials.</p>

<div class="mt-6 pt-6 border-t border-border">
              <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">Verified</span>
            </div>
          </div>
        </article>

<article class="group relative rounded-xl p-8 border overflow-hidden bg-card shadow-glow">
          <div class="relative z-10">
            <div class="w-14 h-14 rounded-lg bg-background flex items-center justify-center mb-6" aria-hidden="true">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"/>
                <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>

<h3 class="text-xl font-bold mb-3">Realistic Exam Simulation</h3>
            <p class="text-muted-foreground">Our mock tests mimic the real BRTA exam format and time limits to get you fully prepared.</p>

<div class="mt-6 pt-6 border-t border-border">
              <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">Realistic</span>
            </div>
          </div>
        </article>

<article class="group relative rounded-xl p-8 border overflow-hidden bg-card shadow-glow">
          <div class="relative z-10">
            <div class="w-14 h-14 rounded-lg bg-background flex items-center justify-center mb-6" aria-hidden="true">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="3" width="18" height="18" rx="3" stroke="currentColor" stroke-width="1.5"/>
                <path d="M7 14h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </div>

<h3 class="text-xl font-bold mb-3">AI-Powered Learning</h3>
            <p class="text-muted-foreground">Use our AI Sign Scanner to instantly identify signs and get AI-generated practice questions.</p>

<div class="mt-6 pt-6 border-t border-border">
              <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">Smart</span>
            </div>
          </div>
        </article>

<article class="group relative rounded-xl p-8 border overflow-hidden bg-card shadow-glow">
          <div class="relative z-10">
            <div class="w-14 h-14 rounded-lg bg-background flex items-center justify-center mb-6" aria-hidden="true">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 5v14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <path d="M5 12h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </div>

<h3 class="text-xl font-bold mb-3">Instant Feedback</h3>
            <p class="text-muted-foreground">Receive immediate explanations for every answer to understand your mistakes and learn faster.</p>

<div class="mt-6 pt-6 border-t border-border">
              <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">Immediate</span>
            </div>
          </div>
        </article>

<article class="group relative rounded-xl p-8 border overflow-hidden bg-card shadow-glow">
          <div class="relative z-10">
            <div class="w-14 h-14 rounded-lg bg-background flex items-center justify-center mb-6" aria-hidden="true">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 7h18M3 12h14M3 17h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </div>

<h3 class="text-xl font-bold mb-3">Personalized Tracking</h3>
            <p class="text-muted-foreground">Our system identifies your weak spots and provides insights to help you focus your efforts.</p>

<div class="mt-6 pt-6 border-t border-border">
              <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">Personalized</span>
            </div>
          </div>
        </article>

<article class="group relative rounded-xl p-8 border overflow-hidden bg-card shadow-glow">
          <div class="relative z-10">
            <div class="w-14 h-14 rounded-lg bg-background flex items-center justify-center mb-6" aria-hidden="true">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 6h16M4 12h16M4 18h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </div>

<h3 class="text-xl font-bold mb-3">Comprehensive Sign Library</h3>
            <p class="text-muted-foreground">Browse a complete and categorized library of all Bangladeshi traffic signs with clear explanations.</p>

<div class="mt-6 pt-6 border-t border-border">
              <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">Complete</span>
            </div>
          </div>
        </article>

</div> 
    </div> 
  </section>
</body>
</html>

Related Examples

Cafee shop
help to buy something that can help you to relax

INGRIDE MUZIRANENGE

1 year ago

1.6k
Your upside-down text

Isabella Kowalski

3 years ago

13.6k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

nejaa badr

1 year ago

3.6k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

SHARIFUL ISLAM

1 year ago

2.3k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

788
Terms of Service Page Template

Anonymous

1 year ago

2.9k
Services

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.6k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Anonymous

3 years ago

12.2k
image

pablitodgb

1 year ago

878
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

461
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

10 months ago

646
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k