Trivial Card

The Complete Guide to Learning Go

Go is an open source, strongly typed, compiled language written to build concurrent and scalable software. Go is designed for simple, reliable, and efficient software.

Read more 

<div class="max-w-md p-8 rounded-md shadow-xl text-slate-600 dark:text-gray-200 dark:bg-gray-500">
  <h3 class="text-xl font-semibold">The Complete Guide to Learning Go</h3>
  <p class="mt-4 mb-6 text-slate-500 dark:text-gray-300">Go is an open source, strongly typed, compiled language written to build concurrent and scalable software. Go is designed for simple, reliable, and efficient software.</p>
  <a href="#" class="px-6 py-3 bg-blue-600 rounded shadow-md text-blue-50 hover:bg-blue-500 dark:hover:bg-blue-400">Read more</a>
</div>

Blog card



<div class="max-w-md bg-white shadow dark:bg-gray-700 dark:text-white">
  <article class="p-8">
    <div class="mb-4">
      <span class="px-3 py-1 text-sm text-orange-600 capitalize bg-orange-200 rounded-full">Business</span>
    </div>
    <a href="#" class="hover:text-blue-500">
      <h1 class="pb-4 text-xl font-semibold tracking-wide dark:text-blue-400">How to Make a Website From Scratch: A Beginner’s Guide</h1>
      <div class="pb-4 font-light text-gray-500 dark:text-gray-100">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue.</div>
      <div class="flex text-sm">
        <img src="/images/avatars/1.jpg" class="h-10 mr-4 rounded-full" />
        <div>
          <span class="flex font-semibold text-black dark:text-gray-100">Jane Smith</span>
          <span class="text-gray-400">June 22, 2022 - 1 min</span>
        </div>
      </div>
    </a>
  </article>
</div>

Card with image horizontal

thumbnail
Ads

Freelance Writing

If you have solid writing skills and can quickly get the hang of all kinds of different topics in a short amount of time, then you should definitely try freelance writing.
Read more 

<section class="max-w-4xl bg-white rounded-lg drop-shadow-md dark:text-gray-400">
  <div class="grid grid-cols-1 dark:bg-gray-500 sm:grid-cols-2">
    <div class="relative h-64 pb-2/3">
      <img src="/images/blog/3.jpg" alt="thumbnail" class="absolute bottom-0 object-cover w-full h-full rounded-l-lg" />
    </div>
    <div class="p-6">
      <span class="px-3 py-1 mt-3 text-sm text-gray-400 bg-gray-100 rounded">Ads</span>
      <h4 class="block py-2 text-2xl text-gray-600 dark:text-white">Freelance Writing</h4>
      <div class="text-slate-500 dark:text-gray-100">If you have solid writing skills and can quickly get the hang of all kinds of different topics in a short amount of time, then you should definitely try freelance writing.</div>
      <div class="pt-6">
        <a href="#" class="px-6 py-3 bg-blue-600 rounded shadow-md text-blue-50 hover:bg-blue-500 dark:hover:bg-blue-400">Read more</a>
      </div>
    </div>
  </div>
</section>

Card with image vertical


<div class="dark:text-white">
  <div class="grid grid-cols-1 gap-y-8 gap-x-8 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
    <div class="rounded-lg shadow-xl dark:bg-gray-500">
      <a href="#" class="hover:text-blue-600 dark:text-blue-400">
        <img src="/images/blog/1.jpg" alt="thumbnail" class="w-full rounded-t-lg" />
        <div class="p-8">
          <div class="mb-2 text-sm text-gray-400 dark:text-gray-300">Business</div>
          <h2 class="mb-2 text-xl font-semibold md:text-2xl">Here are the 5 working steps on success</h2>
          <p class="mb-4 text-gray-600 dark:text-gray-200">Brownie soufflé jelly beans liquorice wafer shortbread cotton candy tart shortbread. Lemon drops pudding candy canes muffin powder. Sugar plum croissant powder ice cream dessert chupa chups.</p>
        </div>
      </a>
    </div>
  </div>
</div>
Buy Me A CoffeeGitHub
by stafura.dev