bg-slate :Tailwind CSS Background Color class
The bg-slate class sets the background color to one of Tailwind slate shades.
bg-slate (Slate Background)
The bg-slate class sets the background color to one of Tailwind's "slate" shades, such as bg-slate-500. This provides a grayish tone often used for neutral or elegant designs.
Example Usage
html
<div class="flex flex-col items-center space-y-5 p-8 rounded-t-md"> <div class="bg-slate-50 text-gray-500 border p-4 rounded-md text-center w-80"> bg-slate-50</div><div class="bg-slate-100 text-gray-500 border p-4 rounded-md text-center w-80"> bg-slate-100</div><div class="bg-slate-200 text-gray-500 border p-4 rounded-md text-center w-80"> bg-slate-200</div><div class="bg-slate-300 text-gray-500 border p-4 rounded-md text-center w-80"> bg-slate-300</div><div class="bg-slate-400 text-white border p-4 rounded-md text-center w-80"> bg-slate-400</div>
<div class="bg-slate-500 text-white p-4 rounded-md text-center w-80"> bg-slate-500</div><div class="bg-slate-600 text-white border p-4 rounded-md text-center w-80"> bg-slate-600</div><div class="bg-slate-700 text-white border p-4 rounded-md text-center w-80"> bg-slate-700</div><div class="bg-slate-800 text-white border p-4 rounded-md text-center w-80"> bg-slate-800</div><div class="bg-slate-900 text-white border p-4 rounded-md text-center w-80"> bg-slate-900</div><div class="bg-slate-950 text-white border p-4 rounded-md text-center w-80"> bg-slate-950</div></div>Preview
bg-slate-50
bg-slate-100
bg-slate-200
bg-slate-300
bg-slate-400
bg-slate-500
bg-slate-600
bg-slate-700
bg-slate-800
bg-slate-900
bg-slate-950
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
