Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
import React from 'react';
export const Default = () => {
return (
<>
<div
className="flex items-center w-[15rem] md:w-[20rem] p-4 text-gray-500 bg-white rounded-xl shadow dark:text-gray-400 dark:bg-[#18191c]"
role="alert">
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
clipRule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clipRule="evenodd"></path>
</svg>
</div>
<div className="ml-3 text-sm font-normal">Set yourself free.</div>
<button
type="button"
className="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-400 dark:bg-[#1e2023] dark:bg-opacity-70 dark:hover:bg-opacity-100"
data-dismiss-target="#toast-default"
aria-label="Close">
<span className="sr-only">Close</span>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
clipRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"></path>
</svg>
</button>
</div>
</>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
A success toast
A error toast
import React from 'react';
import { MdDone, MdClose } from 'react-icons/md';
export const Done = () => {
return (
<>
<div className="h-max w-[15rem] md:w-[20rem] p-2 border-2 border-green-400 dark:border-opacity-50
bg-green-100 dark:bg-[#223125] rounded-xl flex items-center justify-between">
<div className="flex items-center">
<div className="flex items-center justify-center w-10 h-10 bg-green-500 dark:bg-[#264027] rounded-2xl">
<span className="flex items-center justify-center bg-white rounded-xl w-6 h-6">
<span>
<MdDone className="text-green-500 dark:text-[#3ea736]" />
</span>
</span>
</div>
<div>
<p className="text-gray-700 dark:text-white pl-4">A success toast</p>
</div>
</div>
<div>
<MdClose className="text-lg text-gray-700 dark:text-white mr-4 cursor-pointer hover:opacity-60" />
</div>
</div>
</>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
A warning toast
A blue toast
import React from 'react';
import { MdOutlineWarningAmber, MdClose } from 'react-icons/md';
export const Warning = () => {
return (
<>
<div
className="h-max w-[15rem] md:w-[20rem] p-2 border-2 border-yellow-400 dark:border-opacity-50 bg-yellow-100
dark:bg-[#35301f] rounded-full flex items-center justify-between">
<div className="flex items-center">
<div className="flex items-center justify-center w-10 h-10 bg-yellow-500 dark:bg-[#836513] rounded-full">
<span className="flex items-center justify-center bg-white rounded-full w-6 h-6">
<span>
<MdOutlineWarningAmber className="text-yellow-500 dark:text-[#b7ae01]" />
</span>
</span>
</div>
<div>
<p className="text-gray-700 dark:text-white pl-4">
A warning toast
</p>
</div>
</div>
<div>
<MdClose className="text-lg text-gray-700 dark:text-white mr-4 cursor-pointer hover:opacity-60" />
</div>
</div>
</>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
import React from 'react';
export const Undo = () => {
return (
<>
<div
className="flex items-center w-[15rem] md:w-[20rem] p-4 text-gray-500 bg-white rounded-xl shadow dark:text-gray-400 dark:bg-[#18191c]"
role="alert">
<div className="text-sm font-normal">Conversation archived.</div>
<div className="flex items-center ml-auto space-x-2">
<a
className="text-sm font-medium text-blue-600 p-1.5 hover:bg-blue-100 rounded-lg dark:text-blue-500 dark:hover:bg-gray-700"
href="#!">
Undo
</a>
<button
type="button"
className="bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-400 dark:bg-[#1e2023] dark:bg-opacity-70 dark:hover:bg-opacity-100">
<span className="sr-only">Close</span>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
clipRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"></path>
</svg>
</button>
</div>
</div>
</>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
Lazydev glassphorism toast ui
import React from 'react';
import { MdDone } from 'react-icons/md';
export const Glassphorism = () => {
return (
<>
<div className="relative z-20 flex items-center w-[15rem] md:w-[20rem] py-3 px-4 bg-white shadow-lg dark:bg-darkSecondary rounded-xl bg-opacity-50 backdrop-filter backdrop-blur-sm">
<div className="flex items-center justify-center bg-green-200 rounded-full h-8 w-8 mr-3 md:mr-5">
<span>
<MdDone className="text-green-500 text-lg" />
</span>
</div>
<div>
<h4 className="font-semibold text-green-500">Glassphorism toast</h4>
<p className="text-xs">Lazydev glassphorism toast ui</p>
</div>
</div>
</>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
import React from 'react';
export const WithButton = () => {
const defaultButton =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 active:bg-opacity-80 ease-in-out bg-[#1a5cff] dark:bg-[#1a5cff] md:text-sm text-white hover:shadow-md hover:shadow-blue-500/50 ';
const buttonTransparent =
'rounded-xl py-2 px-4 shadow-md text-sm duration-300 whitespace-nowrap ease-in-out bg-blue-500 bg-opacity-30 md:text-sm text-[#1a5cff] ';
return (
<div className="w-[15rem] md:w-[20rem] p-4 text-gray-500 bg-white rounded-xl shadow dark:bg-[#18191c] dark:text-gray-400">
<div className="flex">
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:text-blue-300 dark:bg-blue-900">
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
clipRule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clipRule="evenodd"></path>
</svg>
</div>
<div className="ml-3 text-sm font-normal">
<span className="mb-1 text-sm font-semibold text-gray-900 dark:text-white">
Update available
</span>
<div className="mb-2 text-sm font-normal">
A new software version is available for download.
</div>
<div className="flex items-center space-x-2">
<button className={defaultButton}>Update</button>
<button className={buttonTransparent}>Not now</button>
</div>
</div>
<button
type="button"
className="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-400 dark:bg-[#1e2023] dark:bg-opacity-70 dark:hover:bg-opacity-100"
data-dismiss-target="#toast-interactive"
aria-label="Close">
<span className="sr-only">Close</span>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
clipRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"></path>
</svg>
</button>
</div>
</div>
);
};
About Lazy.dev
Why Lazy.dev?
FAQ
Documentation
GitHUb
Privacy
Issues
FAQ
Copyright ©2023 Lazydev
Created By Anvarov