[{"data":1,"prerenderedAt":202},["ShallowReactive",2],{"article:creating-linkedin-logo-with-tailwindcss":3,"\u002Fblog\u002Fcreating-linkedin-logo-with-tailwindcss-surround":191},{"id":4,"title":5,"author":6,"body":7,"date":179,"description":180,"extension":181,"image":182,"meta":183,"minRead":116,"navigation":184,"path":185,"published":184,"seo":186,"stem":187,"tags":188,"__hash__":190},"blog\u002Fblog\u002Fcreating-linkedin-logo-with-tailwindcss.md","Creating LinkedIn Logo with TailwindCSS","Baljeet Singh",{"type":8,"value":9,"toc":177},"minimark",[10,14,49,52,166,173],[11,12,13],"p",{},"In this article, we'll see how we can create a LinkedIn logo with the help of Tailwind CSS",[11,15,16,23,24,31,32,31,37,42,43,48],{},[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Ftailwindcss.com\u002F",[21],"nofollow","Tailwind"," is a utility-first CSS framework packed with classes like ",[25,26,27],"strong",{},[28,29,30],"code",{},"flex",", ",[25,33,34],{},[28,35,36],{},"pt-4",[25,38,39],{},[28,40,41],{},"text-center"," and ",[25,44,45],{},[28,46,47],{},"rotate-90"," that can be composed to build any design, directly in your markup.",[11,50,51],{},"So, to create it using Tailwind, we can make use of the grid classes as follows,",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"grid min-h-screen place-items-center bg-gray-50\">\n  \u003Cdiv class=\"grid h-32 w-32 place-items-center rounded-2xl bg-sky-600\">\n    \u003Cdiv class=\"text-8xl font-bold text-white\">in\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[28,60,61,93,114,147,157],{"__ignoreMap":58},[62,63,66,70,74,78,81,84,88,90],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"sMK4o","\u003C",[62,71,73],{"class":72},"swJcz","div",[62,75,77],{"class":76},"spNyl"," class",[62,79,80],{"class":68},"=",[62,82,83],{"class":68},"\"",[62,85,87],{"class":86},"sfazB","grid min-h-screen place-items-center bg-gray-50",[62,89,83],{"class":68},[62,91,92],{"class":68},">\n",[62,94,96,99,101,103,105,107,110,112],{"class":64,"line":95},2,[62,97,98],{"class":68},"  \u003C",[62,100,73],{"class":72},[62,102,77],{"class":76},[62,104,80],{"class":68},[62,106,83],{"class":68},[62,108,109],{"class":86},"grid h-32 w-32 place-items-center rounded-2xl bg-sky-600",[62,111,83],{"class":68},[62,113,92],{"class":68},[62,115,117,120,122,124,126,128,131,133,136,140,143,145],{"class":64,"line":116},3,[62,118,119],{"class":68},"    \u003C",[62,121,73],{"class":72},[62,123,77],{"class":76},[62,125,80],{"class":68},[62,127,83],{"class":68},[62,129,130],{"class":86},"text-8xl font-bold text-white",[62,132,83],{"class":68},[62,134,135],{"class":68},">",[62,137,139],{"class":138},"sTEyZ","in",[62,141,142],{"class":68},"\u003C\u002F",[62,144,73],{"class":72},[62,146,92],{"class":68},[62,148,150,153,155],{"class":64,"line":149},4,[62,151,152],{"class":68},"  \u003C\u002F",[62,154,73],{"class":72},[62,156,92],{"class":68},[62,158,160,162,164],{"class":64,"line":159},5,[62,161,142],{"class":68},[62,163,73],{"class":72},[62,165,92],{"class":68},[11,167,168],{},[17,169,172],{"href":170,"rel":171},"https:\u002F\u002Fplay.tailwindcss.com\u002FewgpV33Ugv",[21],"Click here to see the live demo",[174,175,176],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":58,"searchDepth":95,"depth":95,"links":178},[],"2022-07-29","In this article, we'll see how we can create a LinkedIn logo with the help of tailwind css","md","\u002Fimg\u002FLinkedin_Logo_TailwindCSS_yy7vfe.jpg",{},true,"\u002Fblog\u002Fcreating-linkedin-logo-with-tailwindcss",{"title":5,"description":180},"blog\u002Fcreating-linkedin-logo-with-tailwindcss",[189],"Web Design","9jn-EqPHFDZSQjBBaqWXD2hB0_YtDdLs1-vJFZjnUXc",[192,197],{"title":193,"path":194,"stem":195,"description":196,"children":-1},"Creating Figma Logo with TailwindCSS","\u002Fblog\u002Fcreating-figma-logo-with-tailwindcss","blog\u002Fcreating-figma-logo-with-tailwindcss","Step-by-step guide to recreating the Figma logo using only TailwindCSS utility classes.",{"title":198,"path":199,"stem":200,"description":201,"children":-1},"Creating custom popover component with Vue 3 and Tailwind CSS","\u002Fblog\u002Fcreating-popover-component-with-vue3","blog\u002Fcreating-popover-component-with-vue3","In this article we'll see how we can create a custom design sytem popover component with vue 3 and tailwind css.",1775568346390]