about us simple

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is about me

About us

Author QQ-VVN

Tailwind v3.4 1.1k

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
 <section class="min-h-screen px-4 py-14 text-white font-sans">
    <div class="max-w-6xl mx-auto">
        <div class="max-w-3xl mx-auto text-center mb-12 relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-indigo-600/20 blur-3xl opacity-30 rounded-full"></div>
            <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500 mb-4">Hakkımızda</h1>
            <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 mx-auto mb-6 rounded-full"></div>
            <p class="text-lg text-gray-300 relative z-10">
                Mütevazı başlangıçlardan oyun dünyasında bir oyun değiştirici olmaya — 2015'ten beri en son teknoloji araçlar, eklentiler ve çözümler üretiyoruz. Sadece ürün geliştirmiyoruz; oyunun geleceğini şekillendiren deneyimler yaratıyoruz.
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-rocket text-blue-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Yolculuğumuz</h3>
                <p class="text-gray-300">
                    2015'te büyük bir vizyona sahip küçük bir ekip olarak başlayan serüvenimiz, şimdi yaratıcılık, teknoloji ve yeniliğin merkezi haline geldi. Misyonumuz her zaman netti: oyun dünyasında mümkün olanın sınırlarını zorlayan araçlar yaratmak.
                </p>
                <p class="text-gray-300 mt-4">
                    Üstlendiğimiz her projede, hem geliştiriciler hem de oyuncular için deneyimi yükseltmeyi hedefliyoruz. Çözümlerimiz sadece araç değil; yaratıcılığın katalizörleridir.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-lightbulb text-purple-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Özünde Yenilik</h3>
                <p class="text-gray-300">
                    Yenilik bizim için sadece bir sözcük değil — şirketimizin kalp atışıdır. Geliştirdiğimiz her ürün ilham vermek, meydan okumak ve dönüştürmek için tasarlanmıştır. Vizyoner ve uzman ekibimiz sürekli olarak sınırları zorluyor.
                </p>
                <p class="text-gray-300 mt-4">
                    En küçük detayı mükemmelleştirirken veya tamamen yeni bir şey yaratırken, odak noktamız her zaman kalite, performans ve kullanıcı deneyimidir. Sadece trendi takip etmiyoruz; trendi yaratıyoruz.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mb-16">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">8+</div>
                    <div class="text-gray-400">Yıllık Deneyim</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">50k+</div>
                    <div class="text-gray-400">Mutlu Kullanıcı</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div>
                    <div class="text-gray-400">Çalışma Süresi</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">7/24</div>
                    <div class="text-gray-400">Destek</div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-indigo-400/20 to-indigo-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-clock text-indigo-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Gelecek Şimdi</h3>
                <p class="text-gray-300">
                    Oyunun geleceği sınırsız ve vizyonumuz da öyle. Büyümeye ve gelişmeye devam ederken, gelecekte olacakları şekillendirmeye her zamankinden daha kararlıyız. Ekibimiz sürekli yenilik yapıyor, araştırıyor ve işbirliği yapıyor.
                </p>
                <p class="text-gray-300 mt-4">
                    Sadece yazılım geliştirmiyoruz; deneyimler şekillendiriyoruz. Odak noktamız, geliştiricileri güçlendiren, oyun deneyimini geliştiren ve interaktif eğlencenin geleceğini sunan yeni nesil oyun araçları yaratmak.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Neden Biz?</h3>
                <p class="text-gray-300">
                    Oyun dünyasının sürekli değiştiği bir ortamda, sadece ürün değil — bir ortaklık sunuyoruz. Oyun dünyasının rekabetçi, hızlı tempolu ve sürekli gelişen bir yapıya sahip olduğunu anlıyoruz.
                </p>
                <p class="text-gray-300 mt-4">
                    İş akışınızı düzene sokmak isteyen bir geliştirici veya deneyiminizi üst seviyeye çıkarmak isteyen bir oyuncu olun, yanınızdayız. Ürünlerimiz tek bir hedefle tasarlandı: en iyi işinizi yapmanızı, en iyi oyununuzu oynamanızı ve en iyi deneyiminizi yaratmanızı sağlamak.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mt-16">
            <h3 class="text-2xl font-bold text-white mb-8 text-center">Değerlerimiz</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-blue-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Güvenlik</h4>
                    <p class="text-gray-400 text-sm">En son güvenlik önlemleriyle güvenliğinizi ve gizliliğinizi önceliklendiriyoruz</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-tachometer-alt text-purple-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Performans</h4>
                    <p class="text-gray-400 text-sm">Araçlarımız minimum sistem etkisiyle maksimum performans için optimize edilmiştir</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-headset text-green-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Destek</h4>
                    <p class="text-gray-400 text-sm">Özel ekibimiz her türlü sorunuzda size yardımcı olmaya hazır</p>
                </div>
            </div>
        </div>
    </div>
</section>
</div>

Related Examples

About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.6k
About Us

ariaw

11 months ago

1.4k
Abous Us
About us section with statastics and CTA buttons

Rajesh Maheshwari

1 year ago

1.5k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
About Us

KULDEEP

1 year ago

1.7k
Sleek & Modern Tailwind CSS Card with Vibrant Gradient
✔ Vibrant Gradient Background 🎨 ✔ Soft Shadows & Hover Scaling ✨ ✔ Dark Mode Friendly 🌙 ✔ Minimalist & Clean UI 💎

Sachin Kannaujiya

1 year ago

1.6k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

wavy kits

11 months ago

1.4k
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.2k
About us section

Mr Robot

3 years ago

20.4k
Heading Style

KULDEEP

1 year ago

763
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Rathanak Phan

1 year ago

1.8k