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

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

8 months ago

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

7 months ago

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

885
The future ai
The is technology

Author:
ORGIN_DREAMS

5 months ago

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

5 months ago

1.1k
profile3

Author:
pablitodgb

4 months ago

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

Author:
SAI BENDE

3 months ago

388
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

1 month ago

184
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

6 months ago

429
Card
Card

Author:
Aman kumar

1 year ago

2.5k
Modern resume template
modern resume template with data

Author:
Amit Pachange

2 years ago

21.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components