Design comparison
Solution retrospective
The first thing I learned was how to control the deg of a linear gradient with TailwindCSS. In the tailwind.config.js file I define what I want the gradient to look like. Then call that gradient where needed.
theme: { extend: { backgroundImage: { 'gradient-150': 'linear-gradient(150deg, #FFF 0%, #FFF4F4 100%);' }}}
<div id='contentWrapper' className='pt-8 pb-[92px] bg-gradient-150 h-full'>
Using the rgba color model you are able to change the opacity with the last value. This project called for the opacity of the border color to be 50%. I was able to set it to that value on initial load with Tailwind using this code:
<div id="formContainer" className='flex items-center justify-between border border-solid border-darkPink/[.50] rounded-[28px] bg-transparent'>
If the data as incorrectly entered then a new border color is shown. From here if a vaild email is then submitted I needed to revert all changes back to the original state. I used this code to get the opacity back to 50%:
const formContainer = document.getElementById('formContainer'); const clearText = document.getElementById('email'); const warningContainer = document.getElementById('warningContainer'); errorDiv.innerHTML = ''; setNewError(errorDiv.innerHTML); clearText.value = '' warningContainer.style.display = 'none' formContainer.style.borderWidth = '1px' formContainer.style.borderColor = 'rgba(206, 152, 152, 0.5)'
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord