[ Component ]
Set Your Price
How to use → · range· price
Copy as
<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-2xl bg-white shadow-md w-96 py-4 px-6">
<h1 class="text-xl font-semibold my-2">Set your price</h1>
<p class="text-sm text-gray-500">Choose your fixed and hourly rate to be displayed in your profile for potential clients</p>
<div class="my-4 grid grid-cols-2 gap-4">
<div class="p-4 w-full flex justify-center items-center border-2 border-blue-600 bg-blue-50 rounded-lg text-blue-600 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" class="mr-2 text-blue-600">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path fill-rule="evenodd" d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
<path fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
<path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
</svg> <span>Fixed</span></div>
<div class="p-4 w-full flex justify-center items-center border-2 border-gray-200 rounded-lg group hover:text-blue-600 hover:border-blue-600 hover:bg-blue-50 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" class="mr-2 text-gray-600 group-hover:text-blue-600">
<path fill-rule="evenodd" d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z" />
<path fill-rule="evenodd" d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z" />
<path fill-rule="evenodd" d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z" />
</svg> <span>Hourly</span></div>
</div>
<div>
<div class="text-gray-400">$<span class="ml-1 text-3xl font-medium text-black">3,200</span></div>
<p class="text-gray-500">5 Modules, Hosting support</p><input class="rounded-lg overflow-hidden appearance-none bg-blue-600 h-3 w-full mt-6" type="range" min="1" max="150" step="25" value="50">
<div class="text-gray-400 flex justify-between mb-2"><span>$1200</span> <span>Custom</span></div>
</div>
</div>
</div>