Services

explore our
awesome Services

This tailwind example is contributed by ابراهيم سيد, on 17-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,Author box, User information,collapsible,Article Card, Blog page card, Article card

Pricing Profile Accordion Blog Card

Author ابراهيم سيد

2.8k

Fork Fullscreen

<h2 class="m-5 bg-teal-500 p-3 rounded-xl text-center  text-xl font-bold">الخدمات التي نقدمها في خدمة
              التوصيات المالية</h2>

<div class="flex-auto p-6">
              <div class="relative flex flex-col justify-center">
                <div class="absolute right-4 h-full border-l-2"></div>
                <div class="relative mb-4">
                  <span class="absolute inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 p-4 text-center text-base font-semibold text-white shadow">1</span>
                  <div class="mr-12 w-auto pt-1">
                    <h6 class="text-sm font-semibold text-blue-900">محتوى تعليمي شامل</h6>
                    <p class="mt-1 text-xs text-gray-500">مكتبة غنية بالمقالات الإرشادية ومقاطع الفيديو التعليمية
                      والملخصات التفاعلية التي تغطي جميع جوانب التداولونقدم تحليلات مالية دقيقة ومبنية على البيانات
                      للأسواق المالية والعملات الرقمية.
                    </p>
                  </div>
                </div>

</h6>
                    <p class="mt-1 text-xs text-gray-500">استكشف مجموعة واسعة من الدورات التدريبية التي يقدمها خبراء
                      ماليون معتمدون، مصممة لتطوير مهاراتك ومعرفتك نوفر دعمًا كاملاً لإدارة محافظ الاستثمار بمتابعة
                      دورية وتحليلات مستمرة لتحسين الأداء وإدارة المخاطر</p>
                  </div>
                </div>

<div class="relative mb-4">
                  <span class="absolute inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 p-4 text-center text-base font-semibold text-white shadow">3</span>
                  <div class="mr-12 w-auto pt-1">
                    <h6 class="text-sm font-semibold text-blue-900">توصيات مبنية على التحليل الفني</h6>
                    <p class="mt-1 text-xs text-gray-500">نقدم توصيات مبنية على التحليل الفني، مع تحليلات شاملة للمؤشرات
                      والأنماط الفنية</p>
                  </div>
                </div>

<div class="relative mb-4">
                  <span class="absolute inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 p-4 text-center text-base font-semibold text-white shadow">4</span>
                  <div class="mr-12 w-auto pt-1">
                    <h6 class="text-sm font-semibold text-blue-900">تقييم الأصول والشهادات المالية</h6>
                    <p class="mt-1 text-xs text-gray-500">
                      توفير تقييمات دقيقة للأصول المالية المختلفة والشهادات الاستثمارية.

</p>
                  </div>
                </div>

<div class="relative mb-4">
                  <span class="absolute inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 p-4 text-center text-base font-semibold text-white shadow">5</span>
                  <div class="mr-12 w-auto pt-1">
                    <h6 class="text-sm font-semibold text-blue-900">تحسين الاستراتيجيات وإدارة المخاطر</h6>
                    <p class="mt-1 text-xs text-gray-500">نقدم استشارات لتحسين الاستراتيجيات الاستثمارية وإدارة المخاطر
                      المالية بشكل فعال. حيث يمكنك طرح الأسئلة والحصول على إجابات مباشرة</p>
                  </div>
                </div>

</div>
            </div>
          </div>
        </div>

</div>
      </div>
    </div>

</div>
</div>

Related Examples

Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

10 months ago

1.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

9 months ago

1.2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

8 months ago

940
The future ai
The is technology

Author:
ORGIN_DREAMS

7 months ago

764
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.3k
profile3

Author:
pablitodgb

6 months ago

276
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

5 months ago

570
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

3 months ago

415
Card template

Author:
Raul antonio de la cruz hernandez

1 week ago

15
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.1k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

4 months ago

397
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components