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

441

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

Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

8 months ago

1.2k
chat bar
live chat

Author:
gidy

9 months ago

1.3k
Button
Button with scale animation on hover and translate-y on active

Author:
Nabile BABABODI ABOUDOU MOUTAROU

2 months ago

81
Icon group

Author:
Conan Hilton

3 years ago

10.1k
Snake Game tailwind
snake game

Author:
QQ-VVN

10 months ago

910
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

10 months ago

993
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.7k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

3.1k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

10 months ago

1k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

1 year ago

1.6k
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components