How to Create a Responsive Neumorphic UI using TailwindCSS
Tags: webdev, tailwindcss, html
Published: 2023-03-12 12:06:43


![Design Inspired from [icodethis](icodethis.com) platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hx1om0o1r51t8ymf1pu.png)

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.


![Demo of Neumorphic UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6pikloqsrd8wdrw523n.gif)



## **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.

```xml
<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)


![First Part](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q90eubcyc2y8be1zk9oj.png)

For this section, this is how the code looks like

```xml
<!-- 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 **\[&&gt;\*\],** 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 **\[&&gt;\*\]** 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 **\[&&gt;\*&gt;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 **\[&&gt;\*&gt;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.


![second Part](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bed6c0jrfht0p3r4ock3.png)

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

```xml
 <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


![Third Part](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rm9tq6j8hpabypnvs3z3.png)

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

```xml
<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

```xml
<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.


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu2u9i0f45p6zkdbltsk.png)



## 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](https://codepen.io/mbianou-bradon/pen/zYJpOVN) or find the code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/March%202023/Neumorphic%20UI)

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! 👋