Modal - Copy this React, Tailwind Component to your project

hãy-thiết-kế-cho-tôi-giao-diện-giống-đoạn-code-này-import-React,-{-useState-}-from-'react';-import-{-AiOutlineClose,-AiFillFacebook,-AiFillGoogleCircle,-AiFillTwitterCircle-}-from-'react-icons/ai';-const-Modal-=-()-=>-{-const-[isOpen,-setIsOpen]-=-useState(false);-const-closeModal-=-()-=>-setIsOpen(false);-const-openModal-=-()-=>-setIsOpen(true);-return-(-<div-className='flex-justify-center-items-center-h-screen'>-<button-className='bg-blue-500-text-white-p-2-rounded-md'-onClick={openModal}>Sign-In</button>-{isOpen-&&-(-<div-className='fixed-inset-0-bg-black-bg-opacity-40-flex-justify-center-items-center'-role='dialog'-aria-modal='true'>-<div-className='bg-white-rounded-lg-p-6-max-w-md-w-full'>-<button-className='absolute-top-3-right-3-text-black-text-lg'-onClick={closeModal}><AiOutlineClose-/></button>-<div-className='mb-4'>-<h2-className='text-2xl-font-semibold'>Sign-In</h2>-<p>Access-all-your-features-by-signing-in-to-your-account.</p>-</div>-<div-className='flex-flex-col-space-y-3-mb-4'>-<button-className='flex-items-center-justify-center-p-2-rounded-md-text-white-bg-blue-600'><AiFillFacebook-className='mr-2'-/>-Sign-in-with-Facebook</button>-<button-className='flex-items-center-justify-center-p-2-rounded-md-text-white-bg-red-600'><AiFillGoogleCircle-className='mr-2'-/>Sign-in-with-Google</button>-<button-className='flex-items-center-justify-center-p-2-rounded-md-text-white-bg-blue-400'><AiFillTwitterCircle-className='mr-2'-/>Sign-in-with-Twitter</button>-</div>-<div-className='flex-flex-col'>-<input-className='p-2-border-rounded-md-mb-2'-type='email'-placeholder='Email'-/>-<input-className='p-2-border-rounded-md-mb-2'-type='password'-placeholder='Password'-/>-</div>-<div-className='flex-items-center-justify-between-mb-4'>-<div>-<input-id='rememberMe'-type='checkbox'-/>-<label-htmlFor='rememberMe'-className='ml-2'>Remember-me</label>-</div>-<a-href='#'-className='text-blue-500'>Forgot-password?</a>-</div>-<button-className='w-full-p-2-bg-blue-500-text-white-rounded-md'>Sign-In</button>-<p-className='mt-4'>Don’t-have-an-account?-<a-href='#'-className='text-blue-500'>Sign-up</a></p>-</div>-</div>-)}-</div>-);-};-export-default-Modal;-và-phù-hợp-với-theme-flatsome-với-wordpress-và-bằng-uxbuilder-và-với-ngôn-ngữ-html-cảm-ơn