Skip to content

Languages

81 gist results

@Clickadelic
Clickadelic / vertical-align.html
Created October 27, 2024 22:17
Tailwind CSS vertical align
<div class="flex h-screen">
<div class="m-auto">
<h3>title</h3>
<button>button</button>
</div>
</div>
@SH20RAJ
SH20RAJ / index.html
Created March 30, 2024 18:12
Twitter Card - Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Card</title>
<!-- Include Tailwind CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
</head>
<body class="bg-gray-100">
@Retrockit
Retrockit / button-alignment-test.markdown
Created January 11, 2025 19:54
Button Alignment Test
@thekiharani
thekiharani / contact-mail.html
Last active January 31, 2024 08:49
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="format-detection"
content="telephone=no, date=no, address=no, email=no, url=no"
/>
@26e45ee
26e45ee / index.html
Created May 11, 2024 19:05
Youtube Template Tailwind
<body class="bg-all font-sans">
<!-- header -->
<header class="topbar bg-white py-3 shadow flex z-20 sticky pin-t">
<div class="topbar-menu flex items-center w-1/5">
<div class="flex items-center pl-8">
<a id="hb-menu" href="#">
<i class="fas fa-bars fa-lg mr-8 text-grey text-lg hidden md:block"></i>
</a>
<a href="#" class="w-20">
@skadimoolam
skadimoolam / app.pcss
Last active July 20, 2021 16:38
How to setup Tailwind with Parcel Bundler - https://simplestweb.in/blog/how-to-setup-tailwind-with-parcel-bundler
@tailwind base;
@tailwind components;
@tailwind utilities;
.field {
@apply .rounded .border .py-2 .px-3 .text-gray-800;
}
.field-label {
@apply .mb-2 .uppercase .font-bold .text-lg .text-gray-900;
@oldravian
oldravian / grapesjs-components.markdown
Created December 12, 2023 23:50
grapesjs-components
@minetaro12
minetaro12 / app.css
Last active September 12, 2023 06:57
Hugo with Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Thanks https://github.com/iandinwoodie/github-markdown-tailwindcss */
/* Additional vertical padding used by kbd tag. */
.py-05 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
@maizzle
maizzle / algolia-newsletter.markdown
Last active October 6, 2018 10:46
Algolia Newsletter
@DevAshleyD
DevAshleyD / index.html
Created August 26, 2021 22:22
Truncate long text and show read more/less button as needed
<body class="bg-gray-100" x-data="texts()">
<template x-for="(text, index) in texts">
<div class="container max-w-prose bg-white rounded shadow mx-auto my-6 p-6">
<p class="text-lg text-gray-700 line-clamp-4" x-text="text" x-init="$nextTick(() => { setTruncate(index, $el) })">
</p>
<!-- dont show read more / read less if the text is not truncated -->
<template x-if="truncatable[index]">
<div>
<button class="my-4 underline text-green-500" @click="event.target.parentNode.parentNode.querySelector('p').classList.remove('line-clamp-4'); truncated[index] = false;" x-show="truncated[index]">Read more...</button>