bg-yellow :Tailwind CSS Background Color class

The bg-yellow classes provide shades of yellow from bg-yellow-50 (lightest) to bg-yellow-950 (darkest).


bg-yellow (Yellow Background Shades)

The bg-yellow classes provide shades of yellow from bg-yellow-50 (lightest) to bg-yellow-950 (darkest).

Example Code

html
<div class="flex flex-col items-center space-y-5 p-8 rounded-t-md">
<div class="bg-yellow-50 text-gray-500 border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-50
</div>
<div class="bg-yellow-100 text-gray-500 border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-100
</div>
<div class="bg-yellow-200 text-gray-500 border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-200
</div>
<div class="bg-yellow-300 text-gray-500 border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-300
</div>
<div class="bg-yellow-400 text-white border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-400
</div>
<div class="bg-yellow-500 text-white p-4 rounded-md text-center w-80 font-bold">
bg-yellow-500
</div>
<div class="bg-yellow-600 text-white border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-600
</div>
<div class="bg-yellow-700 text-white border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-700
</div>
<div class="bg-yellow-800 text-white border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-800
</div>
<div class="bg-yellow-900 text-white border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-900
</div>
<div class="bg-yellow-950 text-white border p-4 rounded-md text-center w-80 font-bold">
bg-yellow-950
</div>
</div>

Preview

bg-yellow-50

bg-yellow-100

bg-yellow-200

bg-yellow-300

bg-yellow-400

bg-yellow-500

bg-yellow-600

bg-yellow-700

bg-yellow-800

bg-yellow-900

bg-yellow-950

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates