{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":648,"projects":[{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"4fbd8e","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1192,"jsLen":0,"cssLen":4335,"pureCSS":1,"html":"

Product title

Product description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

$ 123.45

\n \n

","css":"/* before adding the img to the div with the \n\"card-img\" class, remove css styles \n.card-img .img::before and .card-img .img::after,\nthen set the desired styles for .card-img. */\n.card {\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n --main-focus: #2d8cf0;\n width: 230px;\n height: 300px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 20px;\n gap: 10px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card:last-child {\n justify-content: flex-end;\n}\n\n.card-img {\n /* clear and add new css */\n transition: all 0.5s;\n display: flex;\n justify-content: center;\n}\n\n.card-img .img {\n /* delete */\n transform: scale(1);\n position: relative;\n box-sizing: border-box;\n width: 100px;\n height: 100px;\n border-top-left-radius: 80px 50px;\n border-top-right-radius: 80px 50px;\n border: 2px solid black;\n background-color: #228b22;\n background-image: linear-gradient(to top,transparent 10px,rgba(0,0,0,0.3) 10px,rgba(0,0,0,0.3) 13px,transparent 13px);\n}\n\n.card-img .img::before {\n /* delete */\n content: '';\n position: absolute;\n width: 65px;\n height: 110px;\n margin-left: -32.5px;\n left: 50%;\n bottom: -4px;\n background-repeat: no-repeat;\n background-image: radial-gradient(ellipse at center,rgba(0,0,0,0.7) 30%,transparent 30%),linear-gradient(to top,transparent 17px,rgba(0,0,0,0.3) 17px,rgba(0,0,0,0.3) 20px,transparent 20px),linear-gradient(to right,black 2px,transparent 2px),linear-gradient(to left,black 2px,transparent 2px),linear-gradient(to top,black 2px,#228b22 2px);\n background-size: 60% 10%,100% 100%,100% 65%,100% 65%,100% 50%;\n background-position: center 3px,center bottom,center bottom,center bottom,center bottom;\n border-radius: 0 0 4px 4px;\n z-index: 2;\n}\n\n.card-img .img::after {\n /* delete */\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 28px;\n height: 28px;\n margin-left: -14px;\n left: 50%;\n top: -13px;\n background-repeat: no-repeat;\n background-image: linear-gradient(80deg,#ffc0cb 45%,transparent 45%),linear-gradient(-175deg,#ffc0cb 45%,transparent 45%),linear-gradient(80deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),linear-gradient(-175deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),radial-gradient(circle at center,#ffa6b6 45%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(45deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(65deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(22deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 54%,rgba(0,0,0,0) 54%);\n background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 75%,100% 95%,100% 60%;\n background-position: center center;\n border-top-left-radius: 120px;\n border-top-right-radius: 10px;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 70px;\n border-top: 2px solid black;\n border-left: 2px solid black;\n transform: rotate(45deg);\n z-index: 1;\n}\n\n.card-title {\n font-size: 20px;\n font-weight: 500;\n text-align: center;\n color: var(--font-color);\n}\n\n.card-subtitle {\n font-size: 14px;\n font-weight: 400;\n color: var(--font-color-sub);\n}\n\n.card-divider {\n width: 100%;\n border: 1px solid var(--main-color);\n border-radius: 50px;\n}\n\n.card-footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.card-price {\n font-size: 20px;\n font-weight: 500;\n color: var(--font-color);\n}\n\n.card-price span {\n font-size: 20px;\n font-weight: 500;\n color: var(--font-color-sub);\n}\n\n.card-btn {\n height: 35px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n border-radius: 5px;\n padding: 0 15px;\n transition: all 0.3s;\n}\n\n.card-btn svg {\n width: 100%;\n height: 100%;\n fill: var(--main-color);\n transition: all 0.3s;\n}\n\n.card-img:hover {\n transform: translateY(-3px);\n}\n\n.card-btn:hover {\n border: 2px solid var(--main-focus);\n}\n\n.card-btn:hover svg {\n fill: var(--main-focus);\n}\n\n.card-btn:active {\n transform: translateY(3px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"569459","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":4021,"jsLen":0,"cssLen":1714,"pureCSS":1,"html":"

\n \n

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n background-color: white;\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n}\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-left: 1em;\n padding-right: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: lightgray;\n}\n\n.currentplaying {\n display: flex;\n margin: 1em;\n}\n\n.spotify {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: limegreen;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: black;\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: black;\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"5dccad","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":973,"jsLen":0,"cssLen":817,"pureCSS":1,"html":"

\n \n \n

Your password isn't strong enough\n

Password must be at least !8 characters
Password must include Elon's baby name

","css":".notifications-container {\n width: 320px;\n height: auto;\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.error-alert {\n border-radius: 0.375rem;\n padding: 1rem;\n background-color: rgb(254 242 242);\n}\n\n.error-svg {\n color: #F87171;\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.error-prompt-heading {\n color: #991B1B;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: bold;\n}\n\n.error-prompt-container {\n display: flex;\n flex-direction: column;\n margin-left: 1.25rem;\n}\n\n.error-prompt-wrap {\n margin-top: 0.5rem;\n color: #B91C1C;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.error-prompt-list {\n padding-left: 1.25rem;\n margin-top: 0.25rem;\n list-style-type: disc;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"7a2165","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":122,"jsLen":0,"cssLen":1088,"pureCSS":1,"html":"

\n Popular this month\n

\n Powered By\n

Uiverse\n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.card::before {\n content: '';\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"8bf264","snapshot":null,"tags":null,"title":"card by dylanharriscameron","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":78,"jsLen":0,"cssLen":1175,"pureCSS":1,"html":"

\n","css":".card {\n position: relative;\n width: 200px;\n height: 250px;\n border-radius: 14px;\n z-index: 1111;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;\n ;\n}\n\n.bg {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 190px;\n height: 240px;\n z-index: 2;\n background: rgba(255, 255, 255, .95);\n backdrop-filter: blur(24px);\n border-radius: 10px;\n overflow: hidden;\n outline: 2px solid white;\n}\n\n.blob {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background-color: #ff0000;\n opacity: 1;\n filter: blur(12px);\n animation: blob-bounce 5s infinite ease;\n}\n\n@keyframes blob-bounce {\n 0% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: translate(-100%, -100%) translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translate(-100%, -100%) translate3d(100%, 100%, 0);\n }\n\n 75% {\n transform: translate(-100%, -100%) translate3d(0, 100%, 0);\n }\n\n 100% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"8cc19a","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":215,"jsLen":0,"cssLen":855,"pureCSS":1,"html":"

Card title

Here are the details of the card

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 20px;\n background: #f5f5f5;\n position: relative;\n padding: 1.8rem;\n border: 2px solid #c3c6ce;\n transition: 0.5s ease-out;\n overflow: visible;\n}\n\n.card-details {\n color: black;\n height: 100%;\n gap: .5em;\n display: grid;\n place-content: center;\n}\n\n.card-button {\n transform: translate(-50%, 125%);\n width: 60%;\n border-radius: 1rem;\n border: none;\n background-color: #008bf8;\n color: #fff;\n font-size: 1rem;\n padding: .5rem 1rem;\n position: absolute;\n left: 50%;\n bottom: 0;\n opacity: 0;\n transition: 0.3s ease-out;\n}\n\n.text-body {\n color: rgb(134, 134, 134);\n}\n\n/*Text*/\n.text-title {\n font-size: 1.5em;\n font-weight: bold;\n}\n\n/*Hover*/\n.card:hover {\n border-color: #008bf8;\n box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);\n}\n\n.card:hover .card-button {\n transform: translate(-50%, 50%);\n opacity: 1;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"9986d7","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":6426,"jsLen":0,"cssLen":779,"pureCSS":1,"html":"

Starter

/mo

free forever

\n \n \n \n \n \n \n \n \n Lorem Ipsum\n
\n \n \n \n \n \n \n \n \n Lorem Ipsum\n
\n \n \n \n \n \n \n \n \n Lorem Ipsum\n
\n \n \n \n \n \n \n \n \n Lorem Ipsum\n

\n","css":"/*Neo Brutalism pricing card*/\n.card {\n width: 190px;\n background: #00ffa0;\n padding: 1rem;\n border-radius: 1rem;\n border: 0.5vmin solid #05060f;\n box-shadow: 0.4rem 0.4rem #05060f;\n overflow: hidden;\n color: black;\n}\n\n/*Card content*/\n.pricing-block-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.pricing-plan {\n color: #05060f;\n font-size: 1.3rem;\n line-height: 1.25;\n font-weight: 700;\n}\n\n.price-value {\n display: flex;\n color: #05060f;\n font-size: 1.8rem;\n line-height: 1.25;\n font-weight: 700;\n}\n\n.pricing-note {\n opacity: 0.8;\n}\n\n/*Checklist*/\n.check-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.check-list-item {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"b4cfb6","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":5479,"jsLen":0,"cssLen":1544,"pureCSS":1,"html":"

PINK CITY

PARTILY CLOUDY

\n \n \n \n

32°

Min

30°

Max

32°

\n","css":".cardContainer {\n width: fit-content;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n position: relative;\n width: 220px;\n height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 20px 10px;\n border-radius: 10px;\n backdrop-filter: blur(30px);\n background-color: rgba(65, 65, 65, 0.308);\n border: 1px solid rgba(255, 255, 255, 0.089);\n cursor: pointer;\n}\n\n.city {\n font-weight: 700;\n font-size: 0.9em;\n letter-spacing: 1.2px;\n color: white;\n}\n\n.weather {\n font-weight: 500;\n font-size: 0.7em;\n letter-spacing: 1.2px;\n color: rgb(197, 197, 197);\n}\n\n.temp {\n font-size: 1.8em;\n color: white;\n}\n\n.minmaxContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.min,\n.max {\n width: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n padding: 0px 20px;\n gap: 4px;\n}\n\n.max {\n align-items: flex-start;\n border-left: 2px solid white;\n}\n\n.maxHeading,\n.minHeading {\n font-size: 0.7em;\n font-weight: 600;\n color: white;\n}\n\n.maxTemp,\n.minTemp {\n font-size: 0.6em;\n font-weight: 500;\n color: rgb(197, 197, 197);\n}\n\n.cardContainer::before {\n width: 100px;\n height: 100px;\n content: \"\";\n position: absolute;\n background-color: rgb(144, 161, 255);\n z-index: -1;\n border-radius: 50%;\n left: 100px;\n top: 50px;\n transition: all 1s;\n}\n\n.cardContainer:hover::before {\n transform: translate(-50px, 50px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"bd3d31","snapshot":null,"tags":null,"title":"card by Pravins01","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":122,"jsLen":0,"cssLen":1104,"pureCSS":1,"html":"

\n Popular this month\n

\n Powered By\n

Uiverse\n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n color: white;\n}\n\n.card::before {\n content: '';\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"c72fab","snapshot":null,"tags":null,"title":"card by JohnnyCSilva","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":277,"jsLen":0,"cssLen":875,"pureCSS":1,"html":"

Clans of Clash

\n 12 min ago\n

Xhattmahs is not attacking your base!

","css":".card {\n width: 100%;\n max-width: 290px;\n height: 70px;\n background: #353535;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: left;\n backdrop-filter: blur(10px);\n transition: 0.5s ease-in-out;\n}\n\n.card:hover {\n cursor: pointer;\n transform: scale(1.05);\n}\n\n.img {\n width: 50px;\n height: 50px;\n margin-left: 10px;\n border-radius: 10px;\n background: linear-gradient(#d7cfcf, #9198e5);\n}\n\n.card:hover > .img {\n transition: 0.5s ease-in-out;\n background: linear-gradient(#9198e5, #712020);\n}\n\n.textBox {\n width: calc(100% - 90px);\n margin-left: 10px;\n color: white;\n font-family: 'Poppins' sans-serif;\n}\n\n.textContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.span {\n font-size: 10px;\n}\n\n.h1 {\n font-size: 16px;\n font-weight: bold;\n}\n\n.p {\n font-size: 12px;\n font-weight: lighter;\n}\n\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"d0412a","snapshot":null,"tags":null,"title":"card by alexmaracinaru","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":179,"jsLen":0,"cssLen":852,"pureCSS":1,"html":"

\n Person\n

Job Title

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n background: #3405a3;\n border-radius: 15px;\n box-shadow: 1px 5px 60px 0px #100a886b;\n}\n\n.card .card-border-top {\n width: 60%;\n height: 3%;\n background: #6b64f3;\n margin: auto;\n border-radius: 0px 0px 15px 15px;\n}\n\n.card span {\n font-weight: 600;\n color: white;\n text-align: center;\n display: block;\n padding-top: 10px;\n font-size: 16px;\n}\n\n.card .job {\n font-weight: 400;\n color: white;\n display: block;\n text-align: center;\n padding-top: 3px;\n font-size: 12px;\n}\n\n.card .img {\n width: 70px;\n height: 80px;\n background: #6b64f3;\n border-radius: 15px;\n margin: auto;\n margin-top: 25px;\n}\n\n.card button {\n padding: 8px 25px;\n display: block;\n margin: auto;\n border-radius: 8px;\n border: none;\n margin-top: 30px;\n background: #6b64f3;\n color: white;\n font-weight: 600;\n}\n\n.card button:hover {\n background: #534bf3;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"ffddc9","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":419,"jsLen":0,"cssLen":1485,"pureCSS":1,"html":"","css":".cookie-card {\n max-width: 320px;\n padding: 1rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);\n}\n\n.title {\n font-weight: 600;\n color: rgb(31 41 55);\n}\n\n.description {\n margin-top: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgb(75 85 99);\n}\n\n.description a {\n --tw-text-opacity: 1;\n color: rgb(59 130 246);\n}\n\n.description a:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 1rem;\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n flex-shrink: 0;\n}\n\n.pref {\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(31 41 55 );\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);\n border: none;\n background-color: transparent;\n}\n\n.pref:hover {\n color: rgb(156 163 175);\n}\n\n.pref:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.accept {\n font-size: 0.75rem;\n line-height: 1rem;\n background-color: rgb(17 24 39);\n font-weight: 500;\n border-radius: 0.5rem;\n color: #fff;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n border: none;\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.accept:hover {\n background-color: rgb(55 65 81);\n}\n\n.accept:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}"}]}},"actionData":null,"errors":null}