![[IMG]: Awonke Mnotoza](/_next/image?url=https%3A%2F%2Fcdn.dribbble.com%2Fusers%2F12294407%2Favatars%2Fnormal%2Fdc2c157908fef135ce460cdfae65c414.jpg%3F1699800461&w=3840&q=75)
![[IMG] Send email UI design](/_next/image?url=https%3A%2F%2Fi.pinimg.com%2F1200x%2F4a%2F53%2Fd3%2F4a53d3914cd263dbd35beda9d9c914e6.jpg&w=3840&q=75)
The challenge overview
I took this Dribbble design as a small project to really learn how an email frontend is actually built. From the CC field and subject line to the rich text body, I wanted to see how it all fits together. I didn't worry about the backend for this one; I just believe that as an Engineer, you only really know something once you build it yourself.
Design breakdown
I broke the design down into containers before I started. This helped me plan the HTML structure so I knew exactly where everything needed to go.
![[Visit image]: https://za.pinterest.com/pin/896075657145563695](/_next/image?url=https%3A%2F%2Fi.pinimg.com%2F736x%2Ff8%2Fa9%2F03%2Ff8a9035a8923f4c50a083b6806b88558.jpg&w=3840&q=75)
![[Visit image]: https://za.pinterest.com/pin/896075657145563765](/_next/image?url=https%3A%2F%2Fi.pinimg.com%2F736x%2F4e%2F84%2F04%2F4e8404a7788f4471caf12e002bef7579.jpg&w=3840&q=75)
![[Visit image]: https://za.pinterest.com/pin/896075657145563796](/_next/image?url=https%3A%2F%2Fi.pinimg.com%2F736x%2Fc2%2F26%2Fab%2Fc226ab902cf19b6738327784c77b1b03.jpg&w=3840&q=75)
Challenges faced
I ran into a few hurdles while implementing this. Some are small bugs that don't necessarily break anything, but they're definitely there and kept me on my toes.
Apply background blur
Used tailwind to add the backdrop
1<div
2 className="absolute bottom-[55px] left-1/2 -translate-x-1/2 w-[90%] sm:w-[80%] rounded-[10px] z-20 flex flex-col gap-3 backdrop-blur-[50px] backdrop-saturate-150 bg-white/20 isolate"
3 style={{
4 padding: "1rem",
5 }}
6>
7...
8</div>