Mbianou Bradon

Posted on Mar 12, 2023

How to Create a Responsive Neumorphic UI using TailwindCSS

#webdev #tailwindcss #html

Neumorphism, A user interface style that is characterized by a flat design, combined with soft shadows and highlights.

Neumorphism combines developments of flat design and skeuomorphism. Neumorphism, or soft UI, is a visual style that combines background colors, shapes, gradients, highlights, and shadows to ensure graphic intense buttons and switches. All that allows for achieving a soft, extruded plastic look, and almost 3D styling.

Neumorphic UI has a dark box shadow below and a light box shadow above, which creates the look and feel that user interface components are being pushed through a display.

In this tutorial, we will build a Neumorphic design, and get to see how to create this amazing piece of art.

Understanding the Task

Neumorphic UI is a special UI, it is quite different from the normal UI we know of, as it makes use of both flat design and skeuomorphism.

As earlier mentioned, it consists of a dark box-shadow below and a light box-shadow above.

If you are versed with Box-shadow in vanilla CSS, you surely know that this property can take as many entries as you want, as far as they are separated by a comma(,). Neumorphic UI makes use of this advantage by using a dark box-shadow below and a light box-shadow above (we will get to see it in action soon).

Structure of Code

The structure of this component is any different from that of the components we have been building. Though the interface looks pretty different. the underlined root code is the same.

<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!-- I
            Code goes Here
         -->

  </div>
 </div>

</body>

Building Component

We will be building our design progressively. Let's start with the different categories (Output below)

For this section, this is how the code looks like

<!-- Categories -->
<div class="p-10 shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)] rounded-lg flex flex-wrap justify-center gap-5 [&>*]:w-[8rem] [&>*]:h-[8rem] [&>*]:rounded-md [&>*]:bg-purple-7 [&>*]:py-4 [&>*:hover]:shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)] 
[&>*>div]:w-16 [&>*>div]:h-16 [&>*>div]:rounded-full [&>*>div]:text-white [&>*>div]:flex [&>*>div]:items-center [&>*>div]:justify-center [&>*>div]:mx-auto [&>*>h2]:text-[0.8rem] [&>*>h2]:mt-4 [&>*>h2]:text-center">

 <div>

<!-- Icon Container -->
   <div class="bg-rose-500">
     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path fill="currentColor"
d="M5 6C3.355 6 2 7.355 2 9v14c0 1.645 1.355 3 3 3h22c1.645 0 3-1.355 3-3V9c0-1.645-1.355-3-3-3zm0 2h22c.566 0 1 .434 1 1v2H5v2h23v10c0 .566-.434 1-1 1H5c-.566 0-1-.434-1-1V9c0-.566.434-1 1-1z" />
     </svg>
    </div>

<!-- Title -->
    <h2>CREDIT CARD</h2>
</div>

<div class="shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)]">

<!-- Icon Container -->
    <div class="bg-[#faab70]">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path fill="currentColor"
d="M26 10h-2.762A4.487 4.487 0 0 0 16 4.707A4.487 4.487 0 0 0 8.762 10H6a2.002 2.002 0 0 0-2 2v4a2.002 2.002 0 0 0 2 2v10a2.002 2.002 0 0 0 2 2h16a2.002 2.002 0 0 0 2-2V18a2.002 2.002 0 0 0 2-2v-4a2.002 2.002 0 0 0-2-2Zm-9-2.5a2.5 2.5 0 1 1 2.5 2.5H17ZM12.5 5A2.503 2.503 0 0 1 15 7.5V10h-2.5a2.5 2.5 0 0 1 0-5ZM6 12h9v4H6Zm2 6h7v10H8Zm16.001 10H17V18h7ZM17 16v-4h9l.001 4Z" />
        </svg>
      </div>

<!-- Title -->
      <h2>GIFT CARDS</h2>
</div>

<div>
<!-- Icon Container -->
  <div class="bg-[#7b90fd]">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18" /> <path d="M16 10a4 4 0 0 1-8 0" /> </g>
  </svg>
   </div>

<!-- Title -->
    <h2>ORDERS</h2>
 </div>

</div>

Our focus will be laid on the first div on the above code, as it contains all the code of this section. Let's decode this section.

To the main container of this section, we gave it padding of p-10 and a border-radius of rounded-full. We made it a flex container with flex and centered its content along the main axis using justify-content justify-center and gave the content a gap of gap-5. Now, to turn this container into a Neumorphic component, we applied this double box-shadow, shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)]. We have an upper light box-shadow, -0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255), and a lower dark box-shadow 0.625rem_0.625rem_0.875rem_0_rgb(225,226,228)

It's advisable to read a little bit on box-shadow before exercising Neumorphic UIs, as it principally makes use of this powerful property.

For the second part of the code used in this main div, we made use of the tailwindcss property [&>*], in order to target the inner elements of this container.

In order to use this property, you need to have a clear knowledge of the structure of your inner elements, so as to know how to target them.

The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

To each child, we gave it a width and height of w-8 and h-8 respectively, we also gave each of them a border-radius of rounded-full, and a padding-block of py-4

Also, we also added a double box-shadow to each child, which changes them to Neumorphic Components, but this is visible on hover, we did it using [&>*:hover]:shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)]

Similarly, we styled sub-children by targeting them as follows

Icon Container: To target this container, we use [&>*>div], we gave each of them a width and height of w-16 and h-16, border-radius of rounded-full, text-color of text-white. Additionally, we made the container a flexbox and centered the content using flex items-center justify-center and gave it a margin-inline of mx-auto
Title: We targeted this element with [&>*>h2],we gave it a font-size of text-[0.8rem] margin-block-start of mt-4 and centered the text using text-center

I believe we have a better understanding of the above code now.

Let's get proceed with our design.

This section is very brief, here is how it looks like

 <div class="rounded-lg bg-[#e6e9f3] h-full sm:h-20 py-4 my-10 flex items-center justify-center shadow-[inset_0rem_0.2rem_0.4rem_0_rgb(0,0,0,0.1)]">
   <p class="w-[70%] text-sm">Stay on top of your order status, deals, new messages and more. <span class="text-[#7b90fd] cursor-pointer hover:underline">Enable notifications</span></p>
</div>

Understanding this section is very easy. All we did is giving it a border-radius of rounded-lg, a background-color of bg-[#e6e9f3], margin-inline and padding-inline of my-10 and py-4 respectively. We also made it a flexbox using flex items-center justify-center.

The box-shadow used here is shadow-[inset_0rem_0.2rem_0.4rem_0_rgb(0,0,0,0.1)]

That's pretty much for the complex styling

Now the last part of this design is the buttons

For the buttons, we used a similar approach as mentioned above (talking about [&>*] ) I believe you can easily understand it now

<div class="flex justify-between flex-wrap gap-y-5 text-center [&>*]:w-[48%] [&>*]:h-12 [&>*]:cursor-pointer [&>*]:rounded-full [&>*]:border [&>*]:flex [&>*]:items-center [&>*]:justify-center  [&>*:hover]:scale-[1.02] [&>*:active]:scale-100">
    <div class="bg-[#7b90fd] text-white">
         <h2>Continue</h2>
    </div>

    <div class="text-[#7b90fd] bg-white shadow-[0.625rem_0.625rem_0.875rem_0_rgb(225,226,228),-0.5rem_-0.5rem_1.125rem_0_rgb(255,255,255)]">
        <h2>Cancel</h2>
    </div>
</div>

Also, we did applied some stylings to the main container and layer as follows

<body class="bg-[#f2f3f9] flex items-center justify-center min-h-screen">
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div class="w-full sm:w-[35rem] my-8 [&_*]:transition-all [&_*]:ease-linear">
        <!-- I
            Code goes Here
         -->

  </div>
 </div>

</body>

That should be pretty much it.

Conclusion

We just built a fully responsive and beautiful Neumorphic UI from scratch.

We had the opportunity to also revise our knowledge of Vanilla CSS and apply the power of Box Shadows.

I hope like me you enjoyed building this wonderful component.

You can have a Live preview on Codepen or find the code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additions styling you added to your card.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋

DEV Community

How to Create a Responsive Neumorphic UI using TailwindCSS

Understanding the Task

Structure of Code

Building Component

Conclusion

Top comments (0)

Read next

Studying for CPACC | Becoming a Certified Accessibility Professional

WSL Error: no space left on device

High Level requirements and purposes

Launching a website offline without the Internet using Service Worker (English version)