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.5k

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

6 months ago

1.1k
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

5 months ago

840
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

5 months ago

689
The future ai
The is technology

Author:
ORGIN_DREAMS

4 months ago

321
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)

4 months ago

646
profile3

Author:
pablitodgb

3 months ago

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

Author:
SAI BENDE

1 month ago

241
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

21 hours ago

9
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.5k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

5 months ago

635
User card with Social Icons

Author:
Anonymous

1 year ago

1.8k
Stylish profile card with a hover effect

Author:
Anonymous

2 years ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components