Merge pull request #230 from SarveshPatil29/card-badge

added card badge

Author: jsvigneshkanna

tailwind_components/badges/card_badge.jsx

@@ -0,0 +1,16 @@
+import {stripIndent} from "react-codepen-prefill-embed";
+
+const CardBadge = stripIndent`
+<div class="relative mx-10 my-10 max-w-sm rounded overflow-hidden shadow-lg"> 
+ <span class="absolute right-0 top-0 inline-block py-1.5 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-red-600 text-xl text-white rounded">New</span>
+
+<img class="w-full" src="https://media.istockphoto.com/photos/hot-air-balloons-picture-id184091124?s=612x612" alt="VK tailwind Bootstrap">
+  <div class="px-6 py-4">
+    <div class="font-bold text-xl mb-2">Welcome to VK tailwind Bootstrap</div>
+    <p class="text-gray-700 text-base">
+      Best part of card badge is to have a badge above a card. Nothing else 😆
+    </p>
+  </div>
+</div>
+`;
+export default CardBadge;

tailwind_components/badges/collection.js

@@ -1,9 +1,11 @@
 import exampleBadges from "./colorful_badge";
+import CardBadge from "./card_badge";
 import iconBadges from "./icon_badge";
 
 const badgeCollection = [
   {componentName: "Normal Badges", component: exampleBadges},
   {componentName: "Badges with Dot", component: iconBadges},
+  {componentName: "Card Badge", component: CardBadge},
 ];
 
 export default badgeCollection;