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

290

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

Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

3 weeks ago

66
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

8.9k
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.5k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

251
Forgot Password
Forgot Password

Author:
Tanvir Hasan Bappy (Tanvir)

3 weeks ago

103
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.9k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

3 weeks ago

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

Author:
Ahmed Malik

2 years ago

12.3k
HTMLCODE
123

Author:
Anonymous

6 months ago

407
App Hero Section With header

Author:
Abdul Baset Bappy

7 months ago

964
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

820
Life Tree
by salvator

Author:
Baraka Salvator

8 months ago

896

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components