Skip to content

Instantly share code, notes, and snippets.

View clqu's full-sized avatar
to think, to dream, to go beyond dreams

clqu

to think, to dream, to go beyond dreams
View GitHub Profile
@clqu
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
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
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
clqu / Modal.jsx
Created May 9, 2022 19:01
This is a modal component made with TailwindCSS and Next.js.
const { Fragment, useState, useEffect } = require("react");
const { Transition } = require("@headlessui/react");
module.exports = ({
title = "",
content = "",
buttons = [],
classes = "",
onDiscard = "",
onConfirm = "",
@clqu
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>