Home
Omer fils ELENGA
about page

about page

This tailwind example is contributed by Omer fils ELENGA, on 04-Dec-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

About us

Author Omer fils ELENGA

119

Fork Fullscreen

<div class="px-40 flex flex-1 justify-center py-5">
          <div class="layout-content-container flex flex-col max-w-[960px] flex-1">
            <div class="flex flex-wrap justify-between gap-3 p-4">
              <p class="text-[#1b160d] tracking-light text-[32px] font-bold leading-tight min-w-72">À propos de Feux de Brazza</p>
            </div>
            <p class="text-[#1b160d] text-base font-normal leading-normal pb-3 pt-1 px-4">
              Créé en 2005, Feux de Brazza est un festival international de musiques traditionnelles, devenu un événement incontournable pour les amateurs de rythmes et de mélodies
              africaines. Sa mission est de préserver, promouvoir et transmettre le riche patrimoine musical africain, tout en favorisant la créativité et le dialogue
              interculturel.
            </p>
            <h2 class="text-[#1b160d] text-[22px] font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Nos valeurs</h2>
            <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-14">
              <div class="text-[#1b160d] flex items-center justify-center rounded-lg bg-[#f3eee7] shrink-0 size-10" data-icon="MusicNote" data-size="24px" data-weight="regular">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                  <path
                    d="M210.3,56.34l-80-24A8,8,0,0,0,120,40V148.26A48,48,0,1,0,136,184V98.75l69.7,20.91A8,8,0,0,0,216,112V64A8,8,0,0,0,210.3,56.34ZM88,216a32,32,0,1,1,32-32A32,32,0,0,1,88,216ZM200,101.25l-64-19.2V50.75L200,70Z"
                  ></path>
                </svg>
              </div>
              <p class="text-[#1b160d] text-base font-normal leading-normal flex-1 truncate">Préservation du patrimoine musical africain</p>
            </div>
            <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-14">
              <div class="text-[#1b160d] flex items-center justify-center rounded-lg bg-[#f3eee7] shrink-0 size-10" data-icon="Users" data-size="24px" data-weight="regular">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                  <path
                    d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"
                  ></path>
                </svg>
              </div>
              <p class="text-[#1b160d] text-base font-normal leading-normal flex-1 truncate">Transmission aux jeunes générations</p>
            </div>
            <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-14">
              <div class="text-[#1b160d] flex items-center justify-center rounded-lg bg-[#f3eee7] shrink-0 size-10" data-icon="Palette" data-size="24px" data-weight="regular">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                  <path
                    d="M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z"
                  ></path>
                </svg>
              </div>
              <p class="text-[#1b160d] text-base font-normal leading-normal flex-1 truncate">Créativité &amp; expression contemporaine</p>
            </div>
            <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-14">
              <div class="text-[#1b160d] flex items-center justify-center rounded-lg bg-[#f3eee7] shrink-0 size-10" data-icon="Globe" data-size="24px" data-weight="regular">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                  <path
                    d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM101.63,168h52.74C149,186.34,140,202.87,128,215.89,116,202.87,107,186.34,101.63,168ZM98,152a145.72,145.72,0,0,1,0-48h60a145.72,145.72,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.79a161.79,161.79,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154.37,88H101.63C107,69.66,116,53.13,128,40.11,140,53.13,149,69.66,154.37,88Zm19.84,16h38.46a88.15,88.15,0,0,1,0,48H174.21a161.79,161.79,0,0,0,0-48Zm32.16-16H170.94a142.39,142.39,0,0,0-20.26-45A88.37,88.37,0,0,1,206.37,88ZM105.32,43A142.39,142.39,0,0,0,85.06,88H49.63A88.37,88.37,0,0,1,105.32,43ZM49.63,168H85.06a142.39,142.39,0,0,0,20.26,45A88.37,88.37,0,0,1,49.63,168Zm101.05,45a142.39,142.39,0,0,0,20.26-45h35.43A88.37,88.37,0,0,1,150.68,213Z"
                  ></path>
                </svg>
              </div>
              <p class="text-[#1b160d] text-base font-normal leading-normal flex-1 truncate">Dialogue entre peuples &amp; intégration africaine</p>
            </div>
            <div class="flex items-center gap-4 bg-[#fcfaf8] px-4 min-h-14">
              <div class="text-[#1b160d] flex items-center justify-center rounded-lg bg-[#f3eee7] shrink-0 size-10" data-icon="Handshake" data-size="24px" data-weight="regular">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                  <path
                    d="M119.76,217.94A8,8,0,0,1,112,224a8.13,8.13,0,0,1-2-.24l-32-8a8,8,0,0,1-2.5-1.11l-24-16a8,8,0,1,1,8.88-13.31l22.84,15.23,30.66,7.67A8,8,0,0,1,119.76,217.94Zm132.69-96.46a15.89,15.89,0,0,1-8,9.25l-23.68,11.84-55.08,55.09a8,8,0,0,1-7.6,2.1l-64-16a8.06,8.06,0,0,1-2.71-1.25L35.86,142.87,11.58,130.73a16,16,0,0,1-7.16-21.46L29.27,59.58h0a16,16,0,0,1,21.46-7.16l22.06,11,53-15.14a8,8,0,0,1,4.4,0l53,15.14,22.06-11a16,16,0,0,1,21.46,7.16l24.85,49.69A15.9,15.9,0,0,1,252.45,121.48Zm-46.18,12.94L179.06,80H147.24L104,122c12.66,8.09,32.51,10.32,50.32-7.63a8,8,0,0,1,10.68-.61l34.41,27.57Zm-187.54-18,17.69,8.85L61.27,75.58,43.58,66.73ZM188,152.66l-27.71-22.19c-19.54,16-44.35,18.11-64.91,5a16,16,0,0,1-2.72-24.82.6.6,0,0,1,.08-.08L137.6,67.06,128,64.32,77.58,78.73,50.21,133.46l49.2,35.15,58.14,14.53Zm49.24-36.24L212.42,66.73l-17.69,8.85,24.85,49.69Z"
                  ></path>
                </svg>
              </div>
              <p class="text-[#1b160d] text-base font-normal leading-normal flex-1 truncate">Culture de paix &amp; inclusion</p>
            </div>
          </div>
        </div>
        
      </div>
    </div>

Related Examples

Questionnaire Section

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

11 months ago

1.1k
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

16.8k
about us simple

Author:
QQ-VVN

7 months ago

680
about video
about kelaplus video

Author:
Omer fils ELENGA

5 months ago

649
About Company Section – Animated & Responsive
A modern "About Us" section built with Tailwind CSS and Alpine.js, designed to highlight your company’s story, achievements, and values through a clean and animated layout. This component features smooth scroll animations, responsive design, and a balanced two-column layout — one for text content and one for an image with company stats. It’s perfect for corporate websites, SaaS platforms, or startup landing pages that want to showcase professionalism and credibility. ✨ Key Features Elegant fade-in and slide-up animations using Alpine.js Responsive grid layout optimized for all screen sizes Dark mode support built-in Dynamic stats display (years, team size, countries served) Clean Tailwind CSS design with easy customization

Author:
wavy kits

2 months ago

327
Social Media
Social Media button vertical dark style

Author:
sina

3 months ago

339
basichtml
this is basic html

Author:
Anonymous

6 months ago

439
About us section

Author:
Mr Robot

2 years ago

19.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)

Author:
wavy kits

2 months ago

513
About Us

Author:
KULDEEP

6 months ago

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

Author:
Sachin Kannaujiya

10 months ago

1.1k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

10 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components