[{"data":1,"prerenderedAt":508},["ShallowReactive",2],{"article:creating-figma-logo-with-tailwindcss":3,"\u002Fblog\u002Fcreating-figma-logo-with-tailwindcss-surround":497},{"id":4,"title":5,"author":6,"body":7,"date":486,"description":487,"extension":488,"image":489,"meta":490,"minRead":97,"navigation":479,"path":491,"published":479,"seo":492,"stem":493,"tags":494,"__hash__":496},"blog\u002Fblog\u002Fcreating-figma-logo-with-tailwindcss.md","Creating Figma Logo with TailwindCSS","Baljeet Singh",{"type":8,"value":9,"toc":484},"minimark",[10,32,237,240,246,249,457,460,465,468,471,480],[11,12,13,14,21,22,27,28,31],"p",{},"To create a ",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Fwww.google.com\u002Fsearch?q=figma+logo",[19],"nofollow","Figma logo"," with tailwind. Either we have to first setup tailwind in our project or for testing we can use ",[15,23,26],{"href":24,"rel":25},"https:\u002F\u002Fplay.tailwindcss.com\u002F",[19],"Tailwind Playground"," and can start testing tailwind. So, we'll be using the later. So, we can head over to ",[15,29,26],{"href":24,"rel":30},[19]," and paste in the following snippet.",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"flex items-center justify-center min-h-screen min-w-screen\">\n  \u003Cdiv class=\"grid w-32 grid-cols-2\">\n    \u003Cdiv class=\"h-16 bg-red-500 rounded-l-full\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"h-16 bg-red-300 rounded-r-full\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"h-16 bg-purple-500 rounded-l-full\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"h-16 bg-blue-500 rounded-full\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"h-16 bg-yellow-500 rounded-l-full rounded-br-full\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[40,41,42,74,95,121,145,169,193,217,227],"code",{"__ignoreMap":38},[43,44,47,51,55,59,62,65,69,71],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sMK4o","\u003C",[43,52,54],{"class":53},"swJcz","div",[43,56,58],{"class":57},"spNyl"," class",[43,60,61],{"class":49},"=",[43,63,64],{"class":49},"\"",[43,66,68],{"class":67},"sfazB","flex items-center justify-center min-h-screen min-w-screen",[43,70,64],{"class":49},[43,72,73],{"class":49},">\n",[43,75,77,80,82,84,86,88,91,93],{"class":45,"line":76},2,[43,78,79],{"class":49},"  \u003C",[43,81,54],{"class":53},[43,83,58],{"class":57},[43,85,61],{"class":49},[43,87,64],{"class":49},[43,89,90],{"class":67},"grid w-32 grid-cols-2",[43,92,64],{"class":49},[43,94,73],{"class":49},[43,96,98,101,103,105,107,109,112,114,117,119],{"class":45,"line":97},3,[43,99,100],{"class":49},"    \u003C",[43,102,54],{"class":53},[43,104,58],{"class":57},[43,106,61],{"class":49},[43,108,64],{"class":49},[43,110,111],{"class":67},"h-16 bg-red-500 rounded-l-full",[43,113,64],{"class":49},[43,115,116],{"class":49},">\u003C\u002F",[43,118,54],{"class":53},[43,120,73],{"class":49},[43,122,124,126,128,130,132,134,137,139,141,143],{"class":45,"line":123},4,[43,125,100],{"class":49},[43,127,54],{"class":53},[43,129,58],{"class":57},[43,131,61],{"class":49},[43,133,64],{"class":49},[43,135,136],{"class":67},"h-16 bg-red-300 rounded-r-full",[43,138,64],{"class":49},[43,140,116],{"class":49},[43,142,54],{"class":53},[43,144,73],{"class":49},[43,146,148,150,152,154,156,158,161,163,165,167],{"class":45,"line":147},5,[43,149,100],{"class":49},[43,151,54],{"class":53},[43,153,58],{"class":57},[43,155,61],{"class":49},[43,157,64],{"class":49},[43,159,160],{"class":67},"h-16 bg-purple-500 rounded-l-full",[43,162,64],{"class":49},[43,164,116],{"class":49},[43,166,54],{"class":53},[43,168,73],{"class":49},[43,170,172,174,176,178,180,182,185,187,189,191],{"class":45,"line":171},6,[43,173,100],{"class":49},[43,175,54],{"class":53},[43,177,58],{"class":57},[43,179,61],{"class":49},[43,181,64],{"class":49},[43,183,184],{"class":67},"h-16 bg-blue-500 rounded-full",[43,186,64],{"class":49},[43,188,116],{"class":49},[43,190,54],{"class":53},[43,192,73],{"class":49},[43,194,196,198,200,202,204,206,209,211,213,215],{"class":45,"line":195},7,[43,197,100],{"class":49},[43,199,54],{"class":53},[43,201,58],{"class":57},[43,203,61],{"class":49},[43,205,64],{"class":49},[43,207,208],{"class":67},"h-16 bg-yellow-500 rounded-l-full rounded-br-full",[43,210,64],{"class":49},[43,212,116],{"class":49},[43,214,54],{"class":53},[43,216,73],{"class":49},[43,218,220,223,225],{"class":45,"line":219},8,[43,221,222],{"class":49},"  \u003C\u002F",[43,224,54],{"class":53},[43,226,73],{"class":49},[43,228,230,233,235],{"class":45,"line":229},9,[43,231,232],{"class":49},"\u003C\u002F",[43,234,54],{"class":53},[43,236,73],{"class":49},[11,238,239],{},"On the output screen, you should be able to see the tailwind logo,",[11,241,242],{},[243,244],"img",{"alt":38,"src":245},"\u002Fimg\u002Ffigma_tailwind_1_nlnunk.png",[11,247,248],{},"And, If you want to add the dark background, you can update the code like the following,",[33,250,252],{"className":35,"code":251,"language":37,"meta":38,"style":38},"\u003Cdiv class=\"flex items-center justify-center min-h-screen min-w-screen\">\n  \u003Cdiv\n    class=\"flex items-center justify-center w-64 h-64 bg-gray-700 rounded-3xl\"\n  >\n    \u003Cdiv class=\"grid w-32 grid-cols-2\">\n      \u003Cdiv class=\"h-16 bg-red-500 rounded-l-full\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"h-16 bg-red-300 rounded-r-full\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"h-16 bg-purple-500 rounded-l-full\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"h-16 bg-blue-500 rounded-full\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"h-16 bg-yellow-500 rounded-l-full rounded-br-full\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[40,253,254,272,279,294,299,317,340,362,384,406,429,439,448],{"__ignoreMap":38},[43,255,256,258,260,262,264,266,268,270],{"class":45,"line":46},[43,257,50],{"class":49},[43,259,54],{"class":53},[43,261,58],{"class":57},[43,263,61],{"class":49},[43,265,64],{"class":49},[43,267,68],{"class":67},[43,269,64],{"class":49},[43,271,73],{"class":49},[43,273,274,276],{"class":45,"line":76},[43,275,79],{"class":49},[43,277,278],{"class":53},"div\n",[43,280,281,284,286,288,291],{"class":45,"line":97},[43,282,283],{"class":57},"    class",[43,285,61],{"class":49},[43,287,64],{"class":49},[43,289,290],{"class":67},"flex items-center justify-center w-64 h-64 bg-gray-700 rounded-3xl",[43,292,293],{"class":49},"\"\n",[43,295,296],{"class":45,"line":123},[43,297,298],{"class":49},"  >\n",[43,300,301,303,305,307,309,311,313,315],{"class":45,"line":147},[43,302,100],{"class":49},[43,304,54],{"class":53},[43,306,58],{"class":57},[43,308,61],{"class":49},[43,310,64],{"class":49},[43,312,90],{"class":67},[43,314,64],{"class":49},[43,316,73],{"class":49},[43,318,319,322,324,326,328,330,332,334,336,338],{"class":45,"line":171},[43,320,321],{"class":49},"      \u003C",[43,323,54],{"class":53},[43,325,58],{"class":57},[43,327,61],{"class":49},[43,329,64],{"class":49},[43,331,111],{"class":67},[43,333,64],{"class":49},[43,335,116],{"class":49},[43,337,54],{"class":53},[43,339,73],{"class":49},[43,341,342,344,346,348,350,352,354,356,358,360],{"class":45,"line":195},[43,343,321],{"class":49},[43,345,54],{"class":53},[43,347,58],{"class":57},[43,349,61],{"class":49},[43,351,64],{"class":49},[43,353,136],{"class":67},[43,355,64],{"class":49},[43,357,116],{"class":49},[43,359,54],{"class":53},[43,361,73],{"class":49},[43,363,364,366,368,370,372,374,376,378,380,382],{"class":45,"line":219},[43,365,321],{"class":49},[43,367,54],{"class":53},[43,369,58],{"class":57},[43,371,61],{"class":49},[43,373,64],{"class":49},[43,375,160],{"class":67},[43,377,64],{"class":49},[43,379,116],{"class":49},[43,381,54],{"class":53},[43,383,73],{"class":49},[43,385,386,388,390,392,394,396,398,400,402,404],{"class":45,"line":229},[43,387,321],{"class":49},[43,389,54],{"class":53},[43,391,58],{"class":57},[43,393,61],{"class":49},[43,395,64],{"class":49},[43,397,184],{"class":67},[43,399,64],{"class":49},[43,401,116],{"class":49},[43,403,54],{"class":53},[43,405,73],{"class":49},[43,407,409,411,413,415,417,419,421,423,425,427],{"class":45,"line":408},10,[43,410,321],{"class":49},[43,412,54],{"class":53},[43,414,58],{"class":57},[43,416,61],{"class":49},[43,418,64],{"class":49},[43,420,208],{"class":67},[43,422,64],{"class":49},[43,424,116],{"class":49},[43,426,54],{"class":53},[43,428,73],{"class":49},[43,430,432,435,437],{"class":45,"line":431},11,[43,433,434],{"class":49},"    \u003C\u002F",[43,436,54],{"class":53},[43,438,73],{"class":49},[43,440,442,444,446],{"class":45,"line":441},12,[43,443,222],{"class":49},[43,445,54],{"class":53},[43,447,73],{"class":49},[43,449,451,453,455],{"class":45,"line":450},13,[43,452,232],{"class":49},[43,454,54],{"class":53},[43,456,73],{"class":49},[11,458,459],{},"Now, you should be able to see the output as follows,",[11,461,462],{},[243,463],{"alt":38,"src":464},"\u002Fimg\u002Ffigma_tailwind_2_hoi2ck.png",[11,466,467],{},"So, this is how we can create the figma logo with tailwind.",[11,469,470],{},"If you prefer you can take a look at the video tutorial,",[472,473],"iframe",{"width":474,"height":475,"src":476,"frameBorder":477,"allow":478,"allowFullScreen":479},560,315,"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FQJSZgUibZ2c","0","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",true,[481,482,483],"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 .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":38,"searchDepth":76,"depth":76,"links":485},[],"2021-07-27","Step-by-step guide to recreating the Figma logo using only TailwindCSS utility classes.","md","\u002Fimg\u002F047_Creating_Figma_Logo_with_TailwindCSS_r4je5s.jpg",{},"\u002Fblog\u002Fcreating-figma-logo-with-tailwindcss",{"title":5,"description":487},"blog\u002Fcreating-figma-logo-with-tailwindcss",[495],"Web Design","hEvxaT5kEAuO6hbVPdByHVla86YY6LFVm_0TIt02Zjo",[498,503],{"title":499,"path":500,"stem":501,"description":502,"children":-1},"Creating a Static Site With Angular","\u002Fblog\u002Fcreating-a-static-site-with-angular","blog\u002Fcreating-a-static-site-with-angular","In this article we will see how we can create a Static Site with Angular or Prerender Angular Application",{"title":504,"path":505,"stem":506,"description":507,"children":-1},"Creating LinkedIn Logo with TailwindCSS","\u002Fblog\u002Fcreating-linkedin-logo-with-tailwindcss","blog\u002Fcreating-linkedin-logo-with-tailwindcss","In this article, we'll see how we can create a LinkedIn logo with the help of tailwind css",1775568346390]