{"post":{"id":"6141e5b9b95e345575e9968c","_id":"6141e5b9b95e345575e9968c","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1631708047524/H1ua5geww.png","__typename":"PostCoverImage"},"slug":"switch-component-with-react-tailwind-css","readTime":4,"replyCount":1,"responseCount":2,"brief":"Tailwind CSS is one of the best CSS frameworks out there and working with utility classes I just amazing for quick projects. But there is a whole down part to this is you have to create your own component from scratch.\nSo here I am teaching you how t...","subtitle":"","isFeatured":false,"contributors":[{"_id":"60e01b1e4f8e376422a76d89","name":"Heaust","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1632823173653/jp0fVHLc0.jpeg","username":"heaust","__typename":"User"},{"_id":"62266852282dd872a7a994b0","name":"Eduardo","photo":"","username":"mepr","__typename":"User"}],"bookmarked":false,"views":6845,"url":"https://theashishmaurya.hashnode.net/switch-component-with-react-tailwind-css","totalReactions":131,"title":"Switch Component with React + Tailwind CSS","dateAdded":"2021-09-15T12:23:21.357Z","cuid":"cktlh66sp017vvps18l0jf6sn","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","seo":{"title":"How to create switch component in Reactjs with Tailwind CSS","description":"Tailwind CSS is one of the best CSS frameworks out there. Today we will learn how to create a switch component in Reactjs with tailwind CSS from scratch.","__typename":"SEO"},"ogMetaData":{"image":null,"__typename":"OpenGraphMetaData"},"author":{"_id":"60ded1b203707d644a4fdeef","name":"Ashish maurya","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1678650850067/JGVkx0l-N.jpg","isPro":false,"username":"theashishmaurya","__typename":"User","tagline":"Hey there!! wanna learn something new?"},"coAuthors":[],"series":{"_id":"61052c9f3b9b85399dcf2e1c","slug":"react-roadmap","name":"Reactjs","cuid":"ckrrnuprp09hmdps140owe4fb","__typename":"Series"},"tags":[{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"5f4ebbb150b5c61ec6ef4ad2","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607093541067/JnBZUjK8b.png","name":"Tailwind CSS","slug":"tailwind-css","__typename":"Tag"},{"_id":"56744721958ef13879b94b91","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513316949083/By6UMkbfG.png","name":"CSS","slug":"css","__typename":"Tag"},{"_id":"567c03e03f1768f6bf48a678","logo":null,"name":"CSS Animation","slug":"css-animation","__typename":"Tag"},{"_id":"571c5374fc5b53a1ace37ce8","logo":null,"name":"components","slug":"components","__typename":"Tag"}],"publication":{"_id":"60ded1f503707d644a4fdef3","url":"https://theashishmaurya.hashnode.net","canonicalURL":"https://theashishmaurya.hashnode.net","title":"Ashish Maurya's Blog","displayTitle":"","isHeadless":false,"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1625283914413/94SNJB7tH.png","headerColor":"","metaTags":"\n\n\n\n\n\n","isTeam":false,"domainInfo":{"hashnodeSubdomain":"theashishmaurya","domain":{"host":"blog.theashishmaurya.me","ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"6141e7ceb95e345575e99706","author":{"_id":"60e01b1e4f8e376422a76d89","name":"Heaust","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1632823173653/jp0fVHLc0.jpeg","isPro":false,"username":"heaust","__typename":"User"},"content":{"html":"

Absolutely stunning, switching over to tailwind-css right now!!!

\n","markdown":"Absolutely stunning, switching over to tailwind-css right now!!!","text":"Absolutely stunning, switching over to tailwind-css right now!!!\n","__typename":"Content"},"dateAdded":"2021-09-15T12:32:14.203Z","stamp":"cktlhhlrt01ccvps1cu37fjgv","totalReactions":1,"__typename":"Comment","replies":{"edges":[{"node":{"id":"6141e7f882e95e55a87387bd","author":{"_id":"60ded1b203707d644a4fdeef","name":"Ashish maurya","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1678650850067/JGVkx0l-N.jpg","isPro":false,"username":"theashishmaurya","__typename":"User"},"content":{"html":"

Sure it has a lot of perks heaust

\n","markdown":"Sure it has a lot of perks @[heaust](@heaust)","text":"Sure it has a lot of perks heaust\n","__typename":"Content"},"dateAdded":"2021-09-15T12:32:56.044Z","stamp":"cktlhii2201fex4s19sx73hzz","totalReactions":1,"__typename":"Reply"},"__typename":"CommentReplyEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"},{"node":{"id":"622669b156920671339a0540","author":{"_id":"62266852282dd872a7a994b0","name":"Eduardo","photo":"","isPro":false,"username":"mepr","__typename":"User"},"content":{"html":"

How do I change the background color on click?\nExample: I need green bg-color when circle is right and bg-red when circle to left, same with circles

\n","markdown":"How do I change the background color on click?\nExample: I need green bg-color when circle is right and bg-red when circle to left, same with circles","text":"How do I change the background color on click?\nExample: I need green bg-color when circle is right and bg-red when circle to left, same with circles\n","__typename":"Content"},"dateAdded":"2022-03-07T20:23:13.373Z","stamp":"cl0h5ho0s014a28nv22xq3mj4","totalReactions":0,"__typename":"Comment","replies":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"Mg==","__typename":"PageInfo"},"__typename":"PostCommentConnection"},"commenters":{"edges":[{"node":{"_id":"60e01b1e4f8e376422a76d89","name":"Heaust","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1632823173653/jp0fVHLc0.jpeg","isPro":false,"username":"heaust","__typename":"User"},"__typename":"PostCommenterEdge"},{"node":{"_id":"62266852282dd872a7a994b0","name":"Eduardo","photo":"","isPro":false,"username":"mepr","__typename":"User"},"__typename":"PostCommenterEdge"}],"__typename":"PostCommenterConnection"}}}

Switch Component with React + Tailwind CSS

3 comments