I have the following styles in Figma:
button {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 16px;
position: absolute;
width: 227px;
height: 40px;
/* Button/Red */
background: #E30513;
/* RedBtn */
box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44);
border-radius: 10px;
}
<button type="submit">
Make request
</button>
I tried to rewrite these styles on tailwind for the button:
<script src="https://cdn.tailwindcss.com"></script>
<button
type="submit"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-red-600 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2"
>
Make request
</button>
However, I have faced with problems:
border-radius: 10px
only rounded-lg
or rounded-xl
.padding: 10px 16px;
only pre-defined padding values#E30513
Could you explain me, how to use TailwindCSS in my case?
Here is how you can do it directly from TailwindCSS classes using arbitrary values.
<script src="https://cdn.tailwindcss.com"></script>
<button
type="submit"
class="
flex flex-row items-center py-[10px] px-[16px]
absolute w-[227px] h-[40px] bg-[#E30513]
shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
rounded-[10px]
"
>
Make request
</button>