Skip to content

Instantly share code, notes, and snippets.

View fayazara's full-sized avatar
👨‍💻
Writing Code

Fayaz Ahmed fayazara

👨‍💻
Writing Code
311 followers · 15 following
View GitHub Profile
@fayazara
fayazara / TextRotator.vue
Created November 12, 2023 05:18
Rotating text with just tailwindcss
<template>
<div class="p-4 bg-gray-100 rounded-md border flex flex-col justify-center items-center overflow-hidden">
<div class="font-extrabold text-lg [text-wrap:balance] text-gray-700">
We design and develop the best
<span class=" inline-flex flex-col h-[calc(theme(fontSize.lg)*theme(lineHeight.tight))] overflow-hidden">
<ul class="block text-left leading-tight [&_li]:block animate-text-slide">
<li class="text-indigo-500">Mobile apps</li>
<li class="text-rose-500">Websites</li>
<li class="text-yellow-500">Admin dashboards</li>
<li class="text-teal-500">Landing pages</li>
@fayazara
fayazara / index.css
Last active April 24, 2023 09:17
Makes Poe better on wider screens. Screenshot 👇
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
:root {
--font-size-large: 1rem !important;
--text-gray-dark: #334155 !important;
}
body {
font-family: "Inter", sans-serif !important;
}
@fayazara
fayazara / index.js
Last active March 26, 2023 08:32
A cf worker to sumamrize emails even before they hit your inbox. (DOES NOT WORK as there's no way to edit the email content)
const { default: PostalMime } = require("postal-mime");
const AI_MODEL = "gpt-3.5-turbo";
const OPEN_AI_API_KEY = "YOUR_API_KEY_HERE";
const streamToArrayBuffer = async (stream, streamSize) => {
const result = new Uint8Array(streamSize);
let bytesRead = 0;
const reader = stream.getReader();
while (bytesRead < streamSize) {
const { done, value } = await reader.read();
@fayazara
fayazara / index.html
Created June 14, 2022 07:41
Octopus Saas Connection Illustration
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
@fayazara
fayazara / index.vue
Created May 25, 2022 14:36
Vercel like tabs with vue js and tailwindcss
<template>
<main class="py-24 bg-slate-50 min-h-screen">
<div class="border-shadow">
<div class="max-w-4xl mx-auto">
<div ref="wrapper" class="flex items-center relative">
<div
ref="highlighter"
class="bg-slate-200 absolute top-3 rounded-md h-8 transition-all duration-150"
:style="highlightStyles"
></div>
@fayazara
fayazara / scriptable-widget-gh-stars.js
Last active October 19, 2021 00:07
Scriptable widget for displaying a Github repo stars
// Created by Fayaz https://twitter.com/fayazara
let widget = await createWidget();
if (config.runsInWidget) {
Script.setWidget(widget);
} else {
widget.presentSmall();
}
Script.complete();
@fayazara
fayazara / navbar.vue
Created December 23, 2020 16:13
<template>
<header class="fixed top-0 left-0 w-full bg-white border-b">
<div class="container mx-auto flex items-center py-3">
<logo />
<search />
<navbar-actions />
</div>
</header>
</template>
@fayazara
fayazara / rightColumn.vue
Created December 23, 2020 16:07
Listing column for dev.to article
<template>
<div class="min-h-nav">
<div class="rounded-md border overflow-hidden bg-white">
<div class="flex items-center justify-between p-4 border-b">
<p class="text-xl font-semibold">Listings</p>
<p class="text-blue-600">See all</p>
</div>
<p v-if="$fetchState.pending">Fetching listings...</p>
<p v-else-if="$fetchState.error">An error occurred :(</p>
<ul v-else class="divide-y border-b">
@fayazara
fayazara / search.vue
Created December 23, 2020 15:46
<template>
<div class="mx-4 w-96">
<input
type="text"
placeholder="Search..."
class="search-bar search-focus"
/>
</div>
</template>
@fayazara
fayazara / index.vue
Created December 23, 2020 15:44
Three column layout
<template>
<main class="min-h-screen bg-gray-200" style="margin-top: 65px">
<section class="container mx-auto py-8">
<div class="grid grid-cols-4 gap-4">
<div>
<ul class="space-y-4">
<li class="h-8 rounded bg-red-400" v-for="n in 7" :key="n"></li>
</ul>
</div>
<div class="col-span-2">