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

151

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

Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.5k
responsive home page
the best home page

Author:
irahoza daniel

7 months ago

904
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2k
button animation
button animation big

Author:
QQ-VVN

7 months ago

777
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

7 months ago

732
Tailwind Google Map widget

Author:
Dung Vuong

6 months ago

299
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

1 month ago

393
Maintenance page

Author:
Faye

1 year ago

1.6k
Heading Style

Author:
KULDEEP

6 months ago

428
chat bar
live chat

Author:
gidy

7 months ago

1.1k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

1 month ago

109
magic card
by salvator

Author:
Baraka Salvator

7 months ago

878

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components