Home
V. Tym
ProjectPage

ProjectPage

This tailwind example is contributed by V. Tym, on 23-Oct-2025. Component is made with Tailwind CSS v3. It supports dark mode. similar terms for this example are blog page template, article page template

Blog post page

Author V. Tym

215

Fork Fullscreen

<div class="absolute -top-4 inset-x-0 text-center font-bold text-2xl lg:text-4xl mb-6">
      <span class="bg-white px-8 mb- text-primary border-2 uppercase">
      Jordan
      </span> 
    </div>

<div class="relative mx-auto text-center mt-4">
      
      
      <h1 class="my-8 text-3xl md:text-4xl lg:text-5xl font-bold font-mono tracking-tight">
        <span class="bg-clip-text text-transparent bg-gradient-to-b 
        from-primary via-primary to-accent/25 font-roboto mb-6">
        7 years of cooperation for the country's development
        </span>
        
      </h1>

<div class="flex flex-col sm:flex-row justify-between gap-2">

<div class="relative ">
            <div class="info-block">
              <div class="w-max relative ">
                  <img class="w-6 mx-3" src="https://www.svgrepo.com/show/483105/euro-wad.svg" alt="euro-wad icon" width="512" height="512">
              </div>
              <div class="relative">
                  <span class="text-sm relative font-mono">
                      Investments:
                  </span>
                  <span class="font-semibold  text-gray-500">400 000 EUR</span>
              </div>
            </div>
        </div>

<div class="relative ">
            <div class="info-block">
              <div class="w-max ">
                  <img class="w-6 mx-3" src="https://www.svgrepo.com/show/440792/schedule-single.svg" alt="euro-wad icon" width="512" height="512">
              </div>
              <div class="relative">
                  <span class="text-sm relative font-mono">
                      Start:
                  </span>
                  <span class="font-semibold  text-gray-500 ">20-08-2025</span>
              </div>
            </div>
        </div>

<div class="relative ">
            <div class="info-block">
              <div class="w-max relative ">
                  <img class="w-6 mx-3" src="https://www.svgrepo.com/show/440770/home-menu-schedule.svg" alt="euro-wad icon" width="512" height="512">
              </div>
              <div class="relative">
                  <span class="text-sm relative font-mono">
                      Finish:
                  </span>
                  <span class=" font-semibold  text-gray-500 ">20-08-2025</span>
              </div>
            </div>
        </div>
        
        
        
      </div>
    </div>

<div class="absolute top-0 left-0 sm:w-1/4 h-2/3 border-t-2 border-l-2 border-accent/50"></div>
    <div class="absolute bottom-0 right-0 w-1/2 h-1/2 border-b-2 border-r-2 border-accent/50"></div>
  </section>
  <div class="bg-white py-8">
    <div class="container mx-auto px-4 flex flex-col md:flex-row">
       
      
      
      <section class=" md:w-1/4 px-4">
        <div class="relative shadow py-4 px-4 sm:px-2 lg:px-8 overflow-hidden mb-4 border-l-4 border-t-4 border-secondary/50" id="main">  
          <ul class="list-disc mx-auto text-primary/75 text-left font-medium text-md leading-none divide-y divide-blue-200">
             <li>
              
                <a class="py-4 w-full flex items-center  hover:font-semibold" href="#">
                    consectetur adipiscing elit
                </a>
            </li>
            <li>
                <a class="py-3.5 w-full flex items-center hover:font-semibold" href="#">
                    Suspendisse potenti. Mauris euismod, magna sit amet
                </a>
            </li>
          </ul> 
        </div>

<div class="flex justify-left gap-2 flex-wrap">
          <button class="tags">#photography</button>
          <button class="tags">#travel</button>
          <button class="tags">#winter</button>
          <button class="tags">#chill</button>
        </div>
      </section>

<div class="w-full md:w-3/4 px-4">
        <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8d29ya3xlbnwwfDB8fHwxNzYxMjI5NDMzfDA&ixlib=rb-4.1.0&q=80&w=1080" alt="Blog Featured Image" class="mb-8">
          
        
        <div class="prose max-w-none">
          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed sit amet feugiat
            eros, eget eleifend dolor. Proin maximus bibendum felis, id fermentum odio vestibulum id. Sed ac
            ligula eget dolor consequat tincidunt. Nullam fringilla ipsum et ex lacinia, at bibendum elit
            posuere. Aliquam eget leo nec nibh mollis consectetur.</p>
          
          <p class="f-letter indent-8">Suspendisse potenti. Mauris euismod, magna sit amet aliquam dapibus, ex sapien porta nisl, vel
            auctor orci velit in risus. Fusce gravida bibendum dui, id volutpat felis dignissim a. Duis
            sagittis, arcu ac convallis bibendum, neque dolor suscipit dolor, non malesuada magna orci a
            mauris. Proin sollicitudin diam eu enim tincidunt dapibus. Aliquam pharetra purus mauris, id
            lacinia mi malesuada ut. Integer dignissim, urna nec scelerisque feugiat, lacus sapien tincidunt
            sem, sed luctus enim libero vel nunc. Vivamus ornare, felis quis feugiat luctus, orci justo
            auctor urna, et elementum orci dolor ac ante. Ut varius sapien nec fringilla sodales.
            Suspendisse lacinia, metus eu suscipit lobortis, enim sapien commodo sapien, non facilisis urna
            elit eget elit.</p>

<div class="relative my-4 mt-6">
              <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t-2 border-secondary/50"></div>
              </div>
              <div class="relative flex justify-center">
                <span class="f-letter h-paragraph">
                Strengthening democracy and social inclusion
              </span>
              </div>
            </div>

<p class="f-letter indent-8"> With funding from the Agence Française de Développement (AFD), Expertise France is implementing a project to support the Jordanian Ministry of Social Development at both central and local levels in the management and implementation of services for vulnerable populations (national and non-national), with the support of the CDCLs in the governorates of Karak, Jerash and East Amman.
            As part of a project financed by the European Union, the agency is supporting Jordan's reform process towards the consolidation of democracy and the promotion of inclusion in national policies and decision-making processes. The project also aims to strengthen the inclusion of women and young people, and foster a stronger democratic and tolerant political culture.</p>
          <p class="f-letter indent-8">Nulla facilisi. Sed venenatis pretium ante, sed tempor turpis sagittis ac. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vel diam arcu.
            Maecenas bibendum efficitur ex sit amet tristique. Nulla vel sapien euismod, bibendum velit id,
            facilisis magna. Sed vestibulum nisi vitae justo congue, eu bibendum augue interdum. Nam quis
            orci nec nulla posuere facilisis. Etiam feugiat ligula quis est auctor, et sagittis orci
            elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Sed gravida neque vel tellus volutpat, vel laoreet lacus commodo. Vivamus quis enim leo.
          </p>

</div>

<h1 class="f-letter h-paragraph"> Партнери: </h1>
          </div>
          
            <ul class="mt-2 font-medium text-gray-600">
                
                <li class="flex">
                    <svg class="flex-shrink-0 w-6 h-6 text-secondary" viewBox="0 0 24 24" fill="currentColor" class="size-6" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
                    </svg>
                    <span class="ml-3">Join a curated selection of tools designed to enhance productivity and collaboration.</span>
                </li>
                <li class="flex ">
                    <svg class="flex-shrink-0 w-6 h-6 text-secondary" viewBox="0 0 24 24" fill="currentColor" class="size-6" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
                    </svg>
                    <span class="ml-3">Join a curated selection of tools designed to enhance productivity and collaboration.</span>
                </li>
                
            </ul>
        </section>
      </div>

</div>

</div>
</div>

Related Examples

A Captivating Blog Post
Blog post page that grabs attention with a headline hero, immerses readers in compelling content, and delights them with visually appealing elements.

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

1 year ago

4.2k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

428
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

716
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

511
content section

Author:
Crimson

10 months ago

933
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

7 months ago

967
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.5k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.3k
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

8 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

7 months ago

922
Blog, card

Author:
Алла Телегина

9 months ago

806
Blog post template with responsive sidebar

Author:
R.P Ketan

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components