clqu

⚡

always shipping

🛠️ building something awesome

clqu / Ripple.jsx

Created November 6, 2022 18:55

React Ripple

	import { useRef, useEffect } from "react";
	import classNames from "classnames";

	export default function Ripple({ as, children, className, ...props }) {

	const rippleRef = useRef(null);
	useEffect(() => {
	const ripple = (e) => {
	const ripple = document.createElement("span");
	ripple.classList.add("ripple");

clqu / index.html

Last active August 26, 2022 09:07

HTML5 Animated Tabs with TailwindCSS

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML Animated Tabs</title>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

clqu / _app.jsx

Last active January 3, 2024 13:03

Next.js Language

	import '../styles/globals.css'
	import { Provider as LanguageProvider } from 'context/language'

	function MyApp({ Component, pageProps }) {
	return <>
	<LanguageProvider>
	<Component {...pageProps} />
	</LanguageProvider>
	</>
	}

clqu / Modal.jsx

Created May 9, 2022 19:01

This is a modal component made with TailwindCSS and Next.js.

clqu / index.html

Last active April 20, 2022 16:55

HTML Card with TailwindCSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>TailwindCSS Card</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css" rel="stylesheet" />
	</head>

	const { Fragment, useState, useEffect } = require("react");
	const { Transition } = require("@headlessui/react");

	module.exports = ({
	title = "",
	content = "",
	buttons = [],
	classes = "",
	onDiscard = "",
	onConfirm = "",