DEV Community

Discussion on: Day 22/30 : Amazing Profile Cards Design Using HTML and CSS

View post
Collapse
 
louislow profile image
Louis Low • • Edited

I recreated it with the Yogurt CSS in just a few minutes without writing CSS. Just my two cents.


<body class="font-default bg-charcoal-100 flex justify-center items-center">
  <div class="relative p-4 h-24 w-72 flex flex-col justify-center items-start bg-white rounded shadow-lg">
    <div class="pb-2">Bailey Wonger</div>
    <div class="flex flex-gap-2 justify-start items-center">
      <div class="h-6 w-6 bg-gray-400 rounded-full"></div>
      <div class="h-6 w-6 bg-gray-400 rounded-full"></div>
      <div class="h-6 w-6 bg-gray-400 rounded-full"></div>
    </div>
    <div class="absolute -top-4 right-3">
      <img class="h-24 w-auto filter saturate-4 brightness-4 contrast-2 rounded shadow" src="https://picsum.photos/400?random=1">
    </div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
somanathgoudar profile image
Somanath Goudar • • Edited

Woah!! That's just amazing. Mind Blown.
Btw I didnt know about Yogurt CSS.

Wait.. Did u create yogurt?
Just checked it and its just really amazing

Collapse
 
louislow profile image
Louis Low • • Edited

Thanks. I created it two years ago. Just for use in my workplace and my private projects. I mainly use this tool for embedded (IoT) applications. After that, the release to the public has already come true. I hope you enjoy it.

Oh yes, this month June 2021 will release version 1.1.6 on my birthday. Tons of new utilities!

Thread Thread
 
somanathgoudar profile image
Somanath Goudar •

Will definitely check the documentation and make use of it.. Really its just Amazing. Thank you