Skip to content

Commit e4cc1d8

Browse files
jsvigneshkannajsvigneshkanna
committed
badges plagarism removed
1 parent ceb8163 commit e4cc1d8

File tree

4 files changed

+399
-174
lines changed

4 files changed

+399
-174
lines changed

‎tailwind_components/badges/card_badge.jsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const CardBadge = stripIndent`
4-
<div class="relative mx-10 my-10 max-w-sm rounded overflow-hidden shadow-lg">
5-
<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>
4+
<div class="h-full bg-rose-300 pt-10">
5+
<div
6+
class="relative mx-10 max-w-sm rounded-3xl bg-sky-200 shadow-lg shadow-blue-500"
7+
>
8+
<span
9+
class="absolute right-[-20px] top-[-20px] inline-block whitespace-nowrap rounded-full bg-red-600 py-4 px-4 text-center align-baseline text-xl font-bold leading-none text-white shadow-2xl shadow-teal-400"
10+
>New</span
11+
>
612
7-
<img class="w-full" src="https://media.istockphoto.com/photos/hot-air-balloons-picture-id184091124?s=612x612" alt="VK tailwind Bootstrap">
8-
<div class="px-6 py-4">
9-
<div class="font-bold text-xl mb-2">Welcome to VK tailwind Bootstrap</div>
10-
<p class="text-gray-700 text-base">
11-
Best part of card badge is to have a badge above a card. Nothing else 😆
12-
</p>
13+
<img
14+
class="w-full"
15+
src="https://media.istockphoto.com/photos/hot-air-balloons-picture-id184091124?s=612x612"
16+
alt="VK tailwind Bootstrap"
17+
/>
18+
<div class="px-6 py-4">
19+
<div class="mb-2 text-xl font-bold">Welcome to VK tailwind Bootstrap</div>
20+
<p class="pb-6 text-lg font-medium text-blue-900">
21+
Best part of card badge is to have a badge above a card. Nothing else 😆
22+
</p>
23+
</div>
1324
</div>
1425
</div>
1526
`;

‎tailwind_components/badges/close_badge.jsx‎

Lines changed: 75 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,85 @@
11
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const closeBadge = stripIndent`
4-
<!DOCTYPE html>
5-
<html lang="en">
6-
<head>
7-
<meta charset="UTF-8" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9-
<script src="https://cdn.tailwindcss.com"></script>
10-
</head>
11-
<style>
12-
.small,
13-
.big {
14-
transition: opacity 2s;
15-
}
16-
.remove {
17-
opacity: 0;
18-
}
19-
</style>
20-
<body class="bg-gray-100">
21-
<span
22-
id="badge-dismiss-default"
23-
class="small inline-flex items-center py-1 px-2 mr-2 text-xs font-medium text-blue-800 bg-blue-100 dark:bg-blue-200 rounded-full dark:text-blue-800"
4+
<script src="https://cdn.tailwindcss.com"></script>
5+
<style>
6+
.small,
7+
.big {
8+
transition: opacity 2s;
9+
}
10+
.remove {
11+
opacity: 0;
12+
}
13+
</style>
14+
<div class="h-full bg-rose-600 p-20">
15+
<span
16+
id="badge-dismiss-default"
17+
class="small mr-2 inline-flex items-center rounded-full bg-blue-100 py-1 px-2 text-xs font-medium text-blue-800 dark:bg-blue-200 dark:text-blue-800"
18+
>
19+
Small
20+
<button
21+
type="button"
22+
class="ml-2 inline-flex items-center rounded-sm bg-transparent p-0.5 text-sm text-blue-400 hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-300 dark:hover:text-blue-900"
23+
onclick="cl(1)"
2424
>
25-
Small
26-
<button
27-
type="button"
28-
class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-300 dark:hover:text-blue-900"
29-
onclick="cl(1)"
25+
<svg
26+
aria-hidden="true"
27+
class="h-3.5 w-3.5"
28+
aria-hidden="true"
29+
fill="currentColor"
30+
viewBox="0 0 20 20"
31+
xmlns="http://www.w3.org/2000/svg"
3032
>
31-
<svg
32-
aria-hidden="true"
33-
class="w-3.5 h-3.5"
34-
aria-hidden="true"
35-
fill="currentColor"
36-
viewBox="0 0 20 20"
37-
xmlns="http://www.w3.org/2000/svg"
38-
>
39-
<path
40-
fill-rule="evenodd"
41-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
42-
clip-rule="evenodd"
43-
></path>
44-
</svg>
45-
</button>
46-
</span>
33+
<path
34+
fill-rule="evenodd"
35+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
36+
clip-rule="evenodd"
37+
></path>
38+
</svg>
39+
</button>
40+
</span>
4741
48-
<span
49-
id="badge-dismiss-default"
50-
class="big inline-flex items-center py-1 px-2 mr-2 text-sm rounded-full font-medium text-blue-800 bg-blue-100 dark:bg-blue-200 ml-3 dark:text-blue-800"
42+
<span
43+
id="badge-dismiss-default"
44+
class="big mr-2 ml-3 inline-flex items-center rounded-full bg-blue-100 py-1 px-2 text-sm font-medium text-blue-800 dark:bg-blue-200 dark:text-blue-800"
45+
>
46+
Large
47+
<button
48+
type="button"
49+
class="ml-2 inline-flex items-center rounded-sm bg-transparent p-0.5 text-sm text-blue-400 hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-300 dark:hover:text-blue-900"
50+
onclick="cl(0)"
5151
>
52-
Large
53-
<button
54-
type="button"
55-
class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-300 dark:hover:text-blue-900"
56-
onclick="cl(0)"
52+
<svg
53+
aria-hidden="true"
54+
class="h-3.5 w-3.5"
55+
aria-hidden="true"
56+
fill="currentColor"
57+
viewBox="0 0 20 20"
58+
xmlns="http://www.w3.org/2000/svg"
5759
>
58-
<svg
59-
aria-hidden="true"
60-
class="w-3.5 h-3.5"
61-
aria-hidden="true"
62-
fill="currentColor"
63-
viewBox="0 0 20 20"
64-
xmlns="http://www.w3.org/2000/svg"
65-
>
66-
<path
67-
fill-rule="evenodd"
68-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
69-
clip-rule="evenodd"
70-
></path>
71-
</svg>
72-
</button>
73-
</span>
74-
</body>
75-
<script>
76-
let small = document.querySelector(".small");
77-
let big = document.querySelector(".big");
78-
function cl(sm) {
79-
if (sm == 1) small.classList.add("remove");
80-
else big.classList.add("remove");
81-
}
82-
small.addEventListener("transitionend", () => {
83-
small.remove();
84-
});
85-
big.addEventListener("transitionend", () => {
86-
big.remove();
87-
});
88-
</script>
89-
</html>`;
60+
<path
61+
fill-rule="evenodd"
62+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
63+
clip-rule="evenodd"
64+
></path>
65+
</svg>
66+
</button>
67+
</span>
68+
</div>
69+
<script>
70+
let small = document.querySelector(".small");
71+
let big = document.querySelector(".big");
72+
function cl(sm) {
73+
if (sm == 1) small.classList.add("remove");
74+
else big.classList.add("remove");
75+
}
76+
small.addEventListener("transitionend", () => {
77+
small.remove();
78+
});
79+
big.addEventListener("transitionend", () => {
80+
big.remove();
81+
});
82+
</script>
83+
`;
9084

9185
export default closeBadge;

‎tailwind_components/badges/colorful_badge.jsx‎

Lines changed: 93 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,100 @@
1-
import { stripIndent } from "react-codepen-prefill-embed";
1+
import {stripIndent} from "react-codepen-prefill-embed";
22

3-
const badgeExample = stripIndent`<div class="bg-gray-50">
4-
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
5-
<div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
6-
<div class="flex flex-row gap-2 rounded-md shadow">
7-
<div class="flex flex-col gap-2">
8-
<h6 class="text-center text-black">Small</h6>
9-
<hr />
10-
<a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
11-
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
12-
<a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
13-
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-2 py-2 text-xs font-medium text-white hover:bg-blue-700"> Badge blue </a>
14-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-2 py-2 text-xs font-medium text-white hover:bg-lime-700"> Badge lime </a>
15-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-2 py-2 text-xs font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
16-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-2 py-2 text-xs font-medium text-white hover:bg-violet-700"> Badge violet </a>
17-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-2 py-2 text-xs font-medium text-white hover:bg-sky-700"> Badge sky </a>
18-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-2 py-2 text-xs font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
19-
</div>
20-
<div class="flex flex-col gap-2">
21-
<h6 class="text-center text-black">Base</h6>
22-
<hr />
23-
<a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
24-
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
25-
<a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
26-
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-3 py-4 text-base font-medium text-white hover:bg-blue-700"> Badge blue </a>
27-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-3 py-4 text-base font-medium text-white hover:bg-lime-700"> Badge lime </a>
28-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-3 py-4 text-base font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
29-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-3 py-4 text-base font-medium text-white hover:bg-violet-700"> Badge violet </a>
30-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-3 py-4 text-base font-medium text-white hover:bg-sky-700"> Badge sky </a>
31-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-3 py-4 text-base font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
32-
</div><div class="flex flex-col gap-2">
33-
<h6 class="text-center text-black">Large</h6>
34-
<hr />
35-
<a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
36-
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
37-
<a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
38-
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-4 text-lg font-medium text-white hover:bg-blue-700"> Badge blue </a>
39-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-4 py-4 text-lg font-medium text-white hover:bg-lime-700"> Badge lime </a>
40-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-4 text-lg font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
41-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-4 py-4 text-lg font-medium text-white hover:bg-violet-700"> Badge violet </a>
42-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-4 py-4 text-lg font-medium text-white hover:bg-sky-700"> Badge sky </a>
43-
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-4 py-4 text-lg font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
3+
const badgeExample = stripIndent`
4+
<div class="h-full bg-rose-300">
5+
<div
6+
class="mx-auto max-w-7xl py-20 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
7+
>
8+
<div class="mt-8 flex rounded-lg bg-white p-2 lg:mt-0 lg:flex-shrink-0">
9+
<div class="flex flex-row gap-4 rounded-md shadow">
10+
<div class="flex flex-col gap-4">
11+
<h6 class="text-center font-bold text-black">Small</h6>
12+
<hr />
13+
<a
14+
href="https://tailwindcsscomponents.vercel.app/"
15+
target="_blank"
16+
rel="noreferrer"
17+
class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"
18+
>
19+
Badge rounded-full
20+
</a>
21+
<a
22+
href="https://tailwindcsscomponents.vercel.app/"
23+
target="_blank"
24+
rel="noreferrer"
25+
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"
26+
>
27+
Badge rounded-md
28+
</a>
29+
<a
30+
href="https://tailwindcsscomponents.vercel.app/"
31+
target="_blank"
32+
rel="noreferrer"
33+
class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"
34+
>
35+
Badge rounded-xs
36+
</a>
37+
</div>
38+
<div class="flex flex-col gap-6">
39+
<h6 class="text-center font-bold text-black">Base</h6>
40+
<hr />
41+
<a
42+
href="https://tailwindcsscomponents.vercel.app/"
43+
target="_blank"
44+
rel="noreferrer"
45+
class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"
46+
>
47+
Badge rounded-full
48+
</a>
49+
<a
50+
href="https://tailwindcsscomponents.vercel.app/"
51+
target="_blank"
52+
rel="noreferrer"
53+
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"
54+
>
55+
Badge rounded-md
56+
</a>
57+
<a
58+
href="https://tailwindcsscomponents.vercel.app/"
59+
target="_blank"
60+
rel="noreferrer"
61+
class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"
62+
>
63+
Badge rounded-xs
64+
</a>
65+
</div>
66+
<div class="flex flex-col gap-8">
67+
<h6 class="text-center font-bold text-black">Large</h6>
68+
<hr />
69+
<a
70+
href="https://tailwindcsscomponents.vercel.app/"
71+
target="_blank"
72+
rel="noreferrer"
73+
class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"
74+
>
75+
Badge rounded-full
76+
</a>
77+
<a
78+
href="https://tailwindcsscomponents.vercel.app/"
79+
target="_blank"
80+
rel="noreferrer"
81+
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"
82+
>
83+
Badge rounded-md
84+
</a>
85+
<a
86+
href="https://tailwindcsscomponents.vercel.app/"
87+
target="_blank"
88+
rel="noreferrer"
89+
class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"
90+
>
91+
Badge rounded-xs
92+
</a>
93+
</div>
4494
</div>
95+
</div>
4596
</div>
4697
</div>
47-
</div>
4898
`;
4999

50100
export default badgeExample;

0 commit comments

Comments
 (0)