<main class="bg-gray-900 flex justify-center items-center"
style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;
background-color: rgb(217 221 228);">
<div class="relative lg:grid lg:grid-cols-10">
<div class="max-w-lg mx-auto lg:max-w-none lg:mx-0 lg:col-start-4 lg:col-end-8 lg:row-start-1 lg:row-end-4">
<div class="relative z-10 rounded-lg shadow-xl">
<div>
<div class="pointer-events-none absolute inset-0 rounded-lg border-1"></div>
<div class="absolute inset-x-0 top-0 transform translate-y-px">
<div class="flex justify-center transform -translate-y-1/2">
<span class="inline-flex rounded-full bg-teal-400 px-4 py-1 text-sm font-semibold tracking-wider text-white">
Recharge Assistant
</span>
</div>
</div>
<div class="bg-white rounded-lg pt-6">
<div>
<div class="border-b-2 border-gray-100">
<div class="px-4 py-5 bg-white sm:p-6">
<fieldset>
<p class="text-sm leading-5 text-gray-500">
消息推送方式
</p>
<div class="mt-2">
<div class="flex items-center">
<input id="push_everything"
name="push_notifications" type="radio"
class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
<label for="push_everything" class="ml-3">
<span class="block text-sm leading-5 font-medium text-gray-700" style="display: flex;">语音通知 <input type="range" id="range" min="20" max="100" value="60"></span>
</label>
</div>
<div class="mt-4 flex items-center">
<input id="push_email" name="push_notifications"
type="radio"
class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
<label for="push_email" class="ml-3">
<span class="block text-sm leading-5 font-medium text-gray-700">消息推送通知</span>
</label>
</div>
<div class="mt-4 flex items-center">
<input id="push_nothing" name="push_notifications"
disabled
style="background: rgb(216 208 208);"
type="radio"
class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
<label for="push_nothing" class="ml-3">
<div class="block text-sm leading-5 font-medium text-gray-700">自动支付
<span class="text-sm leading-5 text-gray-500">
( 支付信息未补全时,仅支持消息推送 )
</span>
</div>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class=" overflow-hidden sm:rounded-md">
<div class="px-6 py-2 grid grid-cols-6 gap-6">
<div class="col-span-3">
<div class="mt-1 flex rounded-md shadow-sm">
<label for="company_start" class="inline-flex items-center px-3 rounded-l-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">
起始金额:
</label>
<input id="company_start"
type="number"
value="50"
style="border-left: 0;border-right: 0;"
class="form-input flex-1 pl-4 block w-full rounded-none p-1 sm:text-sm sm:leading-5"
>
<span class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">
元
</span>
</div>
</div>
<div class="col-span-3" style="display: none1;">
<div class="mt-1 flex rounded-md shadow-sm">
<label for="company_ratio" class="inline-flex items-center px-3 rounded-l-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">
返现比例:
</label>
<input id="company_ratio"
type="number"
style="border-left: 0;border-right: 0;"
class="form-input flex-1 pl-4 block w-full rounded-none p-1 sm:text-sm sm:leading-5"
>
<span class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">
%
</span>
</div>
</div>
</div>
</div>
<div style="display: none1;">
<div class="px-4 py-2 bg-white sm:p-6" style="padding: 10px 1.5rem;">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<div class="mt-1 flex rounded-md shadow-sm">
<label for="account" class="inline-flex items-center px-3 rounded-l-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">
支付账号:
</label>
<input id="account"
style="border-left: 0;"
class="form-input flex-1 pl-4 block w-full rounded-r-md rounded-none p-1 sm:text-sm sm:leading-5"
>
</div>
</div>
<div class="col-span-6 sm:col-span-3">
<div class="mt-1 flex rounded-md shadow-sm">
<label for="pwd" class="inline-flex items-center px-3 rounded-l-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">
支付密码:
</label>
<input id="pwd"
style="border-left: 0;"
class="form-input flex-1 pl-4 block w-full rounded-r-md rounded-none p-1 sm:text-sm sm:leading-5"
>
</div>
</div>
</div>
<div class="mt-2 col-span-6 sm:col-span-6 text-sm leading-5 text-gray-500">
* 请务必输入支付正确, 错误信息将可能导致支付账号被锁
</div>
<div class="col-span-6 mt-2">
<button class="bg-blue-500 w-full hover:bg-blue-700 text-white py-1 px-1 rounded-full" style="outline: 0">
保存
</button>
</div>
</div>
</div>
<div class="border-t-2 border-gray-100 rounded-b-lg pt-4 pb-4 px-6 bg-gray-50 ">
<ul>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-teal-500" stroke="currentColor"
fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-gray-500 text-sm">
0ad100aa-5718-42ab-a2db-b9faf82c8825
</p>
</li>
<li class="mt-2 flex items-start">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-teal-500" stroke="currentColor"
fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-gray-500 text-sm">
有效期至: <span class="ml-3" style="color: green;"> 2020年11月12日</span>
</p>
</li>
</ul>
<!--
<div class="mt-10">
<div class="rounded-lg shadow-md">
<a href="#"
class="block w-full text-center rounded-lg bg-gray-800 px-6 py-4 text-xl leading-6 font-semibold font-display text-white hover:bg-gray-700 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
Buy Early Access
</a>
</div>
<p class="mt-6 text-center text-base font-medium text-gray-900">
Buying for your team?
<a href="#team-pricing"
class="text-teal-500 font-semibold hover:underline">
View team pricing →
</a>
</p>
</div>
-->
</div>
</div>
</div>
</div>
</div>
</div>
</main>