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 ابراهيم سيد

1.9k

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

1 month ago

443
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

3 weeks ago

153
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

6 days ago

19
Card
Profile Card

Author:
Manuel Dala

1 day ago

7
Card profile
profile card

Author:
Aman kumar

1 year ago

2.1k
nextjs-profile-card-tailwind

Author:
Tailwind Free Snippets

6 months ago

1.1k
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.2k
User | Author profile card template

Author:
Computer guy

1 year ago

8k
portfolio 3

Author:
Evgeniy R

4 months ago

545
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

4.8k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

10.1k
Pricing table

Author:
Laurits

2 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components