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 CSS v3. It is responsive.

Other

Author Abdul Jabbar Al Nahid

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

Snake Game tailwind
snake game

Author:
QQ-VVN

5 months ago

479
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

5 months ago

599
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

4 months ago

331
Login Form (Balsamiq Look)

Author:
Ahmad Syaifuddin

5 days ago

48
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.5k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

990
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.

Author:
SHARIFUL ISLAM

8 months ago

1k
image

Author:
pablitodgb

4 months ago

276
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

4 months ago

419
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12k
Terms of Service Page Template

Author:
Anonymous

10 months ago

1.9k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components