Base Apparel preview

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)'