{"id":5507,"date":"2020-02-19T15:33:05","date_gmt":"2020-02-19T15:33:05","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=5507"},"modified":"2020-02-19T15:33:05","modified_gmt":"2020-02-19T15:33:05","slug":"neumorphic-tabs-design","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/","title":{"rendered":"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI"},"content":{"rendered":"<p><strong>How we can create a tabs program with nemorphism or soft UI design? Solution: See this Neumorphic Tabs Design With Dark Mode Switch, Neumorphism \/ Soft UI.<\/strong><\/p>\n<p>Previously I have shared some <span><a href=\"https:\/\/webdevtrick.com\/tag\/tabs\" target=\"_blank\" rel=\"noopener noreferrer\">tabs<\/a><\/span> programs, but this is a <strong>neumorphic tab<\/strong> with <strong>attractive UI<\/strong> design. Basically, <strong>Neumorphic UI designs<\/strong> pretend to extrude from the background. It\u2019s a raised shape made from the exact same material as the background. It has l<strong>ight and dark shadow<\/strong> combinations to visualize differences from the background. And this is the new trend in web or <span><a href=\"https:\/\/webdevtrick.com\/tag\/ui-design\" target=\"_blank\" rel=\"noopener noreferrer\">UI design<\/a><\/span>, it looks pretty and attractive.<\/p>\n<p>Today you will learn to create <strong>Neumorphism or Soft UI based tabs<\/strong> program. Basically, there are <strong>tabs<\/strong> with 4 items ( <span><a href=\"https:\/\/webdevtrick.com\/tag\/navigation\" target=\"_blank\" rel=\"noopener noreferrer\">navigation<\/a><\/span> with content ) and the navigations are at the top and the content card is below the navigations.\u00a0 Each item contains their own texts, when you will click on another tab item the text will change. Also, there is a <span><a href=\"https:\/\/webdevtrick.com\/tag\/light-and-dark-mode\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>dark and light mode<\/strong><\/a><\/span> toggle button to change the design to <strong>dark mode<\/strong>. These two types of design (light\/dark) contains border and <strong>two types of shadows<\/strong> combination for <strong>neumorphic design<\/strong>.<\/p>\n<p>So, Today I am sharing <strong>Neumorphic Tabs Design<\/strong> With <strong>Dark Mode Switch<\/strong>. The neumophic design is based on CSS and the dark mode switch is based on JavaScript. There I have not used any library for styling or functioning, like any JS library or CSS library. You can use this program on your website or web app because it looks good.<\/p>\n<p>If you are thinking now how this unique tabs program actually is, then see the preview given below.<\/p>\n<h3>Preview Of Tabs with Neumorphism or Soft UI<\/h3>\n<p>See this video preview to getting an idea of how this<strong> tabs design<\/strong> looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-5507-1\" width=\"640\" height=\"322\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs.mp4<\/a><\/video><\/div>\n<a class=\"maxbutton-2 maxbutton maxbutton-demo\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/webdevtrick.com\/demos\/neumorphic-tabs-program\/\"><span class='mb-text'>Live Demo<\/span><\/a>\n<p>Now you can see this UI design visually, also you can see it live by pressing the button given above. If you like this, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/segmented-control-with-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">Segmented Control Interaction<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/form-ui-validation-animation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Form UI Validation Animation<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/color-cross-text-reveal\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color Cross Text Reveal<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/parallax-error-404-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">Parallax Error 404 Page<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>Neumorphic Tabs Design With Dark Mode Switch Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about it. First I have created the main div with class and ID name &#8216;container&#8217; and placed all other elements inside it. Inside the main div, I have placed two divs sections, one for <strong>tab navigation<\/strong> and items, and another for dark mode switch. In the tabs navigation and <span><a href=\"https:\/\/webdevtrick.com\/tag\/text\" target=\"_blank\" rel=\"noopener noreferrer\">text<\/a><\/span> I have placed an ID and class names. Also in the <strong>HTML file<\/strong>, I have linked other files like CSS and JavaScript.<\/p>\n<p>Now <strong>using CSS<\/strong> I have placed all the items in the right place, as you can see in the preview. There I have used background color and <strong>box-shadow combination<\/strong> to creating the neumorphic design. There CSS <span class=\"lang:default decode:true crayon-inline \">box-shadow:<\/span> command is mostly used for <strong>creating the UI<\/strong>. This program is not fully <span><a href=\"https:\/\/webdevtrick.com\/tag\/responsive\" target=\"_blank\" rel=\"noopener noreferrer\">responsive<\/a><\/span>, but I have decreased the sizes of some elements to open is a small screen.<\/p>\n<p>JavaScript handling here the <span><a href=\"https:\/\/webdevtrick.com\/tag\/toggle\" target=\"_blank\" rel=\"noopener noreferrer\">toggle<\/a><\/span> feature for dark and light mode in this program. JS <strong>adding and removing<\/strong> CSS <strong>class names<\/strong> according to actions for changing the style. There I have used <span class=\"lang:default decode:true crayon-inline \">addEventListener<\/span> command to detect actions or changes and declared conditions. Left all other things you will understand easily after<strong> getting the codes<\/strong>, I can&#8217;t explain all in writing.<\/p>\n<p>For creating this program, you have to create 3 files. First file for <strong>HTML<\/strong>, second for <strong>CSS<\/strong>, and the third file for <strong>JavaScript<\/strong>. Follow the steps to creating this without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<em><strong>index.html<\/strong><\/em>&#8216; and put these codes given below.<\/p>\n<pre class=\"height-set:true height:750 lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!--Code By Webdevtrick ( https:\/\/webdevtrick.com )--&gt;\r\n&lt;html lang=\"en\" &gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Neumorphic Tabs | Webdevtrick.com&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"container\" class=\"container\"&gt;\r\n    &lt;div id=\"tabs\" class=\"Tcontainer\"&gt;\r\n\r\n        &lt;div class=\"tabs\"&gt;\r\n            &lt;a id=\"tab1\" data-tab=\"1\" class=\"tab\"&gt;HTML&lt;\/a&gt;\r\n            &lt;a id=\"tab2\" data-tab=\"2\" class=\"tab\"&gt;CSS&lt;\/a&gt;\r\n            &lt;a id=\"tab3\" data-tab=\"3\" class=\"tab\"&gt;jQuery&lt;\/a&gt;\r\n            &lt;a id=\"tab4\" data-tab=\"4\" class=\"tab\"&gt;PHP&lt;\/a&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=\"content\"&gt;\r\n            &lt;div id=\"Tcontent1\" data-tab=\"1\" class=\"Tcontent\"&gt;\r\n              &lt;p&gt;Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.&lt;\/p&gt;\r\n              &lt;p&gt;It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.&lt;\/p&gt;\r\n              &lt;p&gt;HTML elements are the building blocks of HTML pages.&lt;\/p&gt;\r\n              &lt;p class=\"read-more-link\"&gt;&lt;a href=\"#\"&gt;Learn more&lt;\/a&gt;&lt;\/p&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div id=\"Tcontent2\" data-tab=\"2\" class=\"Tcontent\"&gt;\r\n                  &lt;p&gt;Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.&lt;\/p&gt;\r\n                  &lt;p&gt;CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.&lt;\/p&gt;\r\n                 &lt;p&gt;The CSS specifications are maintained by the World Wide Web Consortium (W3C).&lt;\/p&gt;\r\n                  &lt;p class=\"read-more-link\"&gt;&lt;a href=\"#\"&gt;Learn more&lt;\/a&gt;&lt;\/p&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div id=\"Tcontent3\" data-tab=\"3\" class=\"Tcontent\"&gt;\r\n                &lt;p&gt;jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.&lt;\/p&gt;\r\n                &lt;p&gt;It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.&lt;\/p&gt;\r\n                &lt;p&gt;jQuery's syntax is designed to make it easier to navigate a document.&lt;\/p&gt;\r\n                  &lt;p class=\"read-more-link\"&gt;&lt;a href=\"#\"&gt;Learn more&lt;\/a&gt;&lt;\/p&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div id=\"Tcontent4\" data-tab=\"4\" class=\"Tcontent\"&gt;\r\n                &lt;p&gt;PHP is a popular general-purpose scripting language that is especially suited to web development.&lt;\/p&gt;\r\n                &lt;p&gt;It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now produced by The PHP Group.&lt;\/p&gt;\r\n                &lt;p&gt;The standard PHP interpreter, powered by the Zend Engine, is free software released under the PHP License.&lt;\/p&gt;\r\n                  &lt;p class=\"read-more-link\"&gt;&lt;a href=\"#\"&gt;Learn more&lt;\/a&gt;&lt;\/p&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n    &lt;\/div&gt;\r\n  \r\n    &lt;div class=\"DarkModeSW\"&gt;\r\n        &lt;label class=\"switch-label\" for=\"DarkModeSW\"&gt;Dark mode&lt;\/label&gt;\r\n        &lt;label class=\"switch\"&gt;\r\n            &lt;input type=\"checkbox\" id=\"DarkModeSW\"&gt;\r\n            &lt;span class=\"slider round\"&gt;&lt;\/span&gt;\r\n        &lt;\/label&gt;\r\n    &lt;\/div&gt;\r\n  \r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em><strong>style.css<\/strong><\/em>&#8216; and put these codes given here.<\/p>\n<pre class=\"height-set:true height:750 lang:css decode:true \" title=\"style.css\">\/* Code By Webdevtrick ( https:\/\/webdevtrick.com ) *\/\r\n@import url(https:\/\/fonts.googleapis.com\/css?family=Nunito+Sans);\r\n\r\n* {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n.container {\r\n    display: flex;\r\n    height: 100vh;\r\n    background-color: #f4f4f4;\r\n    color: #a2a2a2;\r\n    font-family: \"Nunito Sans\", Arial, Helvetica, sans-serif;\r\n}\r\n.darkmode .container {\r\n    background-color: #1A1B1F;\r\n    color: #8a8a8a;\r\n}\r\n.Tcontainer { \r\n    width: 540px;\r\n    max-width: 620px; \r\n    min-width: 420px;\r\n    margin: auto;\r\n}\r\n\r\n.tabs {\r\n    margin-bottom: 28px; \r\n    display: flex;\r\n      justify-content: space-between;\r\n}\r\n\r\n.tabs a {\r\n    cursor: pointer;\r\n    padding: 12px 24px;\r\n    width: 120px;\r\n    text-align: center;\r\n    font-weight: bold;\r\n    border-radius: 18px;\r\n    transition: background 0.1s, color 0.1s;\r\n    background: linear-gradient(145deg, #ffffff, #dcdcdc);\r\n    box-shadow:  3px 3px 5px #bebebe, \r\n                 -3px -3px 5px #ffffff;\r\n}\r\n.darkmode .tabs a {\r\n    background: linear-gradient(145deg, #1c1d21, #17181c);\r\n    box-shadow:  3px 3px 6px #101114, \r\n                 -3px -3px 6px #24252a;\r\n}\r\n\r\n.tabs a:hover {\r\n    background: linear-gradient(145deg, #f4f4f4, #cecece);\r\n    color: #888;\r\n}\r\n.darkmode .tabs a:hover {\r\n    background: #141414;\r\n    color: #bbb;\r\n}\r\n\r\n.tabs a.active {\r\n    background-color: #f4f4f4;\r\n    color: #bdbdbd;\r\n    cursor: default;\r\n    padding: 14px 22px 10px 26px;\r\n    background: #f4f4f4;\r\n    box-shadow: inset 3px 3px 5px #cbcbcb, \r\n                inset -3px -3px 5px #ffffff;\r\n}\r\n.darkmode .tabs a.active {\r\n    background: #1A1B1F;\r\n    box-shadow: inset  3px 3px 6px #101114, \r\n                inset -3px -3px 6px #24252a; \r\n    color: #6a6a6a;\r\n}\r\n\r\n.Tcontent {\r\n    padding: 46px;\r\n    min-height: 288px;\r\n    display: none;    \r\n    border-radius: 18px;\r\n    background: #f4f4f4;\r\n    box-shadow:  3px 3px 6px #bebebe, \r\n                 -3px -3px 6px #ffffff;\r\n}\r\n.darkmode .Tcontent {\r\n    background: linear-gradient(145deg, #1c1d21, #17181c);\r\n    box-shadow:  3px 3px 6px #101114, \r\n                 -3px -3px 6px #24252a;\r\n}\r\n.content .active {\r\n    display: block;\r\n}\r\n.Tcontent p {\r\n    margin-bottom: 12px;\r\n}\r\n.Tcontent p:last-child {\r\n    margin-bottom: 0;\r\n}\r\n.Tcontent .read-more-link a {\r\n    color: #626262;\r\n    text-decoration: none;\r\n    font-size: 0.85em;\r\n    font-weight: bold;\r\n}\r\n.darkmode .Tcontent .read-more-link a {\r\n    color: #d4d4d4;\r\n}\r\n\r\n.DarkModeSW {\r\n    position: absolute;\r\n    top: 16px;\r\n    right: 16px;\r\n}\r\n.DarkModeSW .switch {\r\n\/*     margin-left: 4px; *\/\r\n}\r\n.switch-label {\r\n    cursor: pointer;\r\n    font-size: 0.85em;\r\n}\r\n.switch {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 44px;\r\n    height: 22px;\r\n    margin-left: 4px;\r\n}\r\n.switch input {\r\n    opacity: 0;\r\n    width: 0;\r\n    height: 0;\r\n}\r\n.slider {\r\n    position: absolute;\r\n    cursor: pointer;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: #1A1B1F;\r\n    transition: .2s;\r\n    box-shadow:  2px 2px 3px #ffffff, \r\n                 -2px -2px 3px #bebebe;\r\n}\r\n.darkmode .slider {\r\n    box-shadow:  2px 2px 3px #34353a, \r\n                 -2px -2px 3px #000104;\r\n}\r\n.slider:before {\r\n    position: absolute;\r\n    content: \"\";\r\n    height: 18px;\r\n    width: 18px;\r\n    left: 3px;\r\n    bottom: 2px;\r\n    background: #9294b8;\r\n    -webkit-transition: .4s;\r\n    transition: .4s;\r\n}\r\ninput:checked + .slider {\r\n    background-color: #f4f4f4;\r\n}\r\ninput:checked + .slider:before {\r\n    transform: translateX(21px);\r\n}\r\n.slider.round {\r\n    border-radius: 11px;\r\n}\r\n.slider.round:before {\r\n    border-radius: 50%;\r\n}\r\n@media (max-width: 650px) {\r\n    .Tcontainer {\r\n        width: 100%;\r\n    }\r\n    .tabs {\r\n        display: block;\r\n    }\r\n    .tabs a {\r\n        width: 70px;\r\n    }\r\n    .Tcontent {\r\n        padding: 15px;\r\n    }\r\n}<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, create a JavaScript file named &#8216;<em><strong>function.js<\/strong><\/em>&#8216; and put the codes.<\/p>\n<pre class=\"height-set:true height:750 lang:js decode:true \" title=\"function.js\">\/\/ Code By Webdevtrick ( https:\/\/webdevtrick.com )\r\nconst tabs = document.querySelectorAll('.tab')\r\nconst Tcontents = document.querySelectorAll('.Tcontent')\r\nconst darkModeSwitch = document.querySelector('#DarkModeSW')\r\n  \r\nconst activateTab = tabnum =&gt; {\r\n    \r\n    tabs.forEach( tab =&gt; {\r\n      tab.classList.remove('active')\r\n    })\r\n    \r\n    Tcontents.forEach( Tcontent =&gt; {\r\n        Tcontent.classList.remove('active')\r\n    })\r\n  \r\n    document.querySelector('#tab' + tabnum).classList.add('active')\r\n    document.querySelector('#Tcontent' + tabnum).classList.add('active')\r\n    localStorage.setItem('jstabs-opentab', JSON.stringify(tabnum))\r\n  \r\n}\r\n\r\ntabs.forEach(tab =&gt; {\r\n    tab.addEventListener('click', () =&gt; {\r\n        activateTab(tab.dataset.tab)\r\n    })\r\n})\r\n\r\ndarkModeSwitch.addEventListener('change', () =&gt; {\r\n    document.querySelector('body').classList.toggle('darkmode')\r\n    localStorage.setItem('jstabs-darkmode', JSON.stringify(!darkmode))\r\n})\r\n\r\nlet darkmode = JSON.parse(localStorage.getItem('jstabs-darkmode'))\r\nconst opentab =  JSON.parse(localStorage.getItem('jstabs-opentab')) || '3'\r\n\r\nif (darkmode === null) {\r\n    darkmode = window.matchMedia(\"(prefers-color-scheme: dark)\").matches \r\n}\r\nif (darkmode) {\r\n    document.querySelector('body').classList.add('darkmode')\r\n    document.querySelector('#DarkModeSW').checked = 'checked'\r\n}\r\nactivateTab(opentab)<\/pre>\n<p>That&#8217;s It. Now you have successfully created <strong>Neumorphic Tabs Design<\/strong> With <strong>Dark Mode<\/strong> Switch, <strong>Neumorphism or Soft UI design<\/strong>. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create a tabs program with nemorphism or soft UI design? Solution: See this Neumorphic Tabs Design With Dark Mode Switch, Neumorphism \/ Soft UI. Previously I have shared some tabs programs, but this is a neumorphic tab with attractive UI design. Basically, Neumorphic UI designs pretend to extrude from the background. It\u2019s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5511,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46],"tags":[428,200,523,67,166,117,231],"class_list":["post-5507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","tag-dark-theme","tag-light-and-dark-mode","tag-neumorphic","tag-source-code","tag-tabs","tag-toggle-switch","tag-ui-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI<\/title>\n<meta name=\"description\" content=\"Want to create a tabs program with attarctive UI? Check out Neumorphic Tabs Design With Dark Mode Switch, Neumorphism or Soft UI Design. Get source code now\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI\" \/>\n<meta property=\"og:description\" content=\"Want to create a tabs program with attarctive UI? Check out Neumorphic Tabs Design With Dark Mode Switch, Neumorphism or Soft UI Design. Get source code now\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-19T15:33:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI\",\"datePublished\":\"2020-02-19T15:33:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\"},\"wordCount\":702,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg\",\"keywords\":[\"dark theme\",\"light and dark mode\",\"neumorphic\",\"source code\",\"tabs\",\"toggle switch\",\"ui design\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\",\"url\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\",\"name\":\"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg\",\"datePublished\":\"2020-02-19T15:33:05+00:00\",\"description\":\"Want to create a tabs program with attarctive UI? Check out Neumorphic Tabs Design With Dark Mode Switch, Neumorphism or Soft UI Design. Get source code now\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg\",\"width\":1200,\"height\":630,\"caption\":\"neumorphic tabs design with dark mode\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI","description":"Want to create a tabs program with attarctive UI? Check out Neumorphic Tabs Design With Dark Mode Switch, Neumorphism or Soft UI Design. Get source code now","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/","og_locale":"en_US","og_type":"article","og_title":"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI","og_description":"Want to create a tabs program with attarctive UI? Check out Neumorphic Tabs Design With Dark Mode Switch, Neumorphism or Soft UI Design. Get source code now","og_url":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2020-02-19T15:33:05+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI","datePublished":"2020-02-19T15:33:05+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/"},"wordCount":702,"commentCount":1,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg","keywords":["dark theme","light and dark mode","neumorphic","source code","tabs","toggle switch","ui design"],"articleSection":["CSS","HTML","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/","url":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/","name":"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg","datePublished":"2020-02-19T15:33:05+00:00","description":"Want to create a tabs program with attarctive UI? Check out Neumorphic Tabs Design With Dark Mode Switch, Neumorphism or Soft UI Design. Get source code now","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/neumorphic-tabs-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/neumorphic-tabs-design.jpg","width":1200,"height":630,"caption":"neumorphic tabs design with dark mode"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/neumorphic-tabs-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"Neumorphic Tabs Design With Dark Mode Switch | Neumorphism \/ Soft UI"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=5507"}],"version-history":[{"count":6,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5507\/revisions"}],"predecessor-version":[{"id":5515,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5507\/revisions\/5515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/5511"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=5507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=5507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=5507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}