lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
33 lines (30 loc) • 1.91 kB
JSX
import React from 'react'
const IconedButton = () => {
return (
<div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl ">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<a href="javascript:void(0)"
class='inline-flex gap-2 items-center justify-center font-bold bg-primarylw text-white hover:bg-primarylw-2 p-4 px-10 rounded-full cursor-pointer'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
</svg>
Button
</a>
<a href="javascript:void(0)"
class='inline-flex gap-2 gap-2 items-center justify-center font-bold bg-darklw text-white hover:bg-darklw-2 p-4 px-10 rounded-full cursor-pointer'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
</svg>
Button
</a>
</div>
</div>
</div>
)
}
export default IconedButton