hasinhayder / Tailwind Cards
Licence: mit
A growing collection of text/image cards you can use/copy-paste in your tailwind css projects
Stars: ✭ 154
Projects that are alternatives of or similar to Tailwind Cards
react-tailwind-food-app
A responsive landing page for food delivery app made with React & Tailwind CSS.
Stars: ✭ 32 (-79.22%)
Mutual labels: learning-by-doing, tailwindcss
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (-1.3%)
Mutual labels: tailwindcss
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-5.19%)
Mutual labels: tailwindcss
Monthly Challenges
Repository containing monthly challenges about quantum computing.
Stars: ✭ 126 (-18.18%)
Mutual labels: learning-by-doing
Tailwindcss Filters
Tailwind CSS plugin to generate filter and backdrop filter utilities
Stars: ✭ 150 (-2.6%)
Mutual labels: tailwindcss
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
Stars: ✭ 1,835 (+1091.56%)
Mutual labels: tailwindcss
Devfolio
A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS
Stars: ✭ 154 (+0%)
Mutual labels: tailwindcss
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (+0.65%)
Mutual labels: tailwindcss
Sage
WordPress starter theme with a modern development workflow
Stars: ✭ 11,531 (+7387.66%)
Mutual labels: tailwindcss
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (-6.49%)
Mutual labels: tailwindcss
Carmel
The Open Digital Innovation Marketplace
Stars: ✭ 136 (-11.69%)
Mutual labels: learning-by-doing
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1392.86%)
Mutual labels: tailwindcss
Ziglearn
Repo for https://ziglearn.org content. Get up to speed with Zig quickly.
Stars: ✭ 135 (-12.34%)
Mutual labels: learning-by-doing
Dive Into Machine Learning
Dive into Machine Learning with Python Jupyter notebook and scikit-learn! First posted in 2016, maintained as of 2021. Pull requests welcome.
Stars: ✭ 10,810 (+6919.48%)
Mutual labels: learning-by-doing
11st Starter Kit
11ty, powered by Snowpack with Tailwind CSS and Alpine.js.
Stars: ✭ 141 (-8.44%)
Mutual labels: tailwindcss
Ffmpeg Video Player
An FFmpeg and SDL Tutorial.
Stars: ✭ 149 (-3.25%)
Mutual labels: learning-by-doing
Pingcrm React
⚛️ Ping CRM React - A demo app to illustrate how Inertia.js works with Laravel and React (hosted on a heroku free dyno).
Stars: ✭ 158 (+2.6%)
Mutual labels: tailwindcss
Tailwindcss Dir
Adds direction (LTR, RTL) variants to your Tailwind project
Stars: ✭ 156 (+1.3%)
Mutual labels: tailwindcss
Tailwind Cards
I used the TailWind CSS Boilerplate project for this.
A growing collection of text/image cards you can use/copy-paste in your tailwind css projects. Some of these cards have animated hover effects.
Check The Demo Here - https://tailwind-cards.netlify.app
start
git clone this_repository
cd this_directory
yarn
yarn dev
build
yarn build
then grab everything from the dist folder
change server port
Just change the port number in vite.config.js
file
export default {
plugins: [],
server: {
open: '/index.html',
port: 3116, //< -change this
}
}
configure tailwind
There is a tailwind.config.js
file with purge
instructions and extra colors, feel free to customize it according to your need
const colors = require('tailwindcss/colors')
module.exports = {
purge:['./*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
display: ['Inter', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
extend: {
colors:{
fuchsia:colors.fuchsia,
cyan:colors.cyan,
emerald:colors.emerald,
teal:colors.teal,
orange:colors.orange,
yellow:colors.yellow,
},
maxHeight:{
116:"29rem", /*464px*/
125:"31.25rem", /*500px*/
140:"35rem", /*560px*/
150:"37.5rem", /*600px*/
190:"47.5rem", /*760px*/
},
height:{
116:"29rem", /*464px*/
125:"31.25rem", /*500px*/
140:"35rem", /*560px*/
150:"37.5rem", /*600px*/
},
minHeight:{
18:"4.5rem", /*72*/
62:"15.5rem", /*248px*/
150:"37.5rem", /*600px*/
},
},
},
variants: {
extend: {
display: ["group-hover"],
opacity: ["group-hover"],
translate: ["group-hover"],
transform: ["group-hover"],
width: ["group-hover", "hover"],
height: ["group-hover", "hover"],
padding: ["group-hover", "hover"],
animation: ["group-hover", "hover"],
scale: ["group-hover", "hover"],
},
},
plugins: [],
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].