Home
Abid Ullah
Tailwind CSS Blog sharing buttons with blog details

Tailwind CSS Blog sharing buttons with blog details

Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

This tailwind example is contributed by Abid Ullah, on 16-Sep-2024. Component is made with Tailwind CSS v3. It supports dark mode. similar terms for this example are Social media links,,Article Card, Blog page card, Article card

Other Social media buttons Blog Card

Author Abid Ullah

525

Fork Fullscreen

<div
	class="py-4 rounde-lg mx-auto max-w-lg flex-row items-center justify-between overflow-hidden rounded-lg bg-gray-300 px-6 flex dark:bg-gray-900 dark:text-white">
	<div class="flex flex-row items-center space-x-3 text-sm ">
		<span class="flex items-center space-x-1">
      
      <svg class="inline-block" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
      </svg>
      <a class="font-semibold" href="#"> abiullah786 </a>
    </span>
		<span class="flex items-center">
      
      <svg class="mr-1 inline-block" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
        <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
      </svg>
      May 27, 2023
    </span>

<span class="flex items-center">
      
      <svg class="mr-1 inline-block" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 001.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0014.828 8a13.133 13.133 0 00-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 001.172 8z" clip-rule="evenodd"></path>
        <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"></path>
      </svg>
      230 views
    </span>
	</div>

Related Examples

Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 month ago

710
Footer with social media buttons

Author:
Sophia Baker

2 years ago

11.8k
Buttons with Icon

Author:
_Amar_

2 years ago

13.7k
Collapsible content

Author:
Rafferty Kim

1 year ago

12.4k
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

10 months ago

2.6k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

4 months ago

887
Blog post cards
responsive blog post cards

Author:
Mr Robot

1 year ago

10.2k
Tailwind invoice example

Author:
Elijah Davis

1 year ago

16.4k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

5 months ago

1.4k
Icon group

Author:
Conan Hilton

1 year ago

8.9k
navigation header
responsive navigation header

Author:
Abid Ullah

3 months ago

830
Privacy policy page template

Author:
Anonymous

7 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components