Meta tags:
description= Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.;
Headings (most frequently used words):
build, modern, html, component, rochelle, one, css, customization, rapidly, websites, without, ever, leaving, your, best, practices, don, actually, work, testimonials, constraint, based, anything, performance, mobile, first, state, variants, projects, driven, prognosis, negative, death, blow, weekly, on, dark, mode, scaling, at, heroku, with, utility, classes, features, editor, tools, ready, made, components, getting, started, core, concepts, community, not, into, frameworks, styles, index, typography, colors, problems,
Text of the page (most frequently used words):
class (139), div (125), css (100), tailwind (99), the (99), text (96), and (93), slate (78), flex (54), developer (48), stroke (45), you (39), rounded (38), button (38), for (37), with (35), center (34), dark (33), font (31), width (30), svg (29), 500 (29), start (28), white (28), full (27), design (26), grid (24), using (23), items (23), col (23), border (22), 900 (22), like (22), round (22), more (21), ring (21), build (20), currentcolor (20), row (20), tailwindcss (20), peer (20), span (19), justify (19), aria (19), label (19), project (19), hover (18), use (18), path (18), fill (18), 400 (18), type (18), focus (17), but (17), height (17), any (17), end (17), only (17), first (16), none (16), space (16), checked (16), was (16), utility (15), shadow (15), that (15), all (14), your (14), semibold (14), hidden (14), time (14), new (14), projects (14), from (13), alt (13), src (13), img (13), has (13), 100 (13), framework (13), front (13), now (13), learn (12), 700 (12), blue (12), lazy (12), loading (12), into (12), stack (12), never (12), web (12), block (11), medium (11), 200 (11), our (11), system (11), can (11), linejoin (11), linecap (11), when (11), html (11), just (11), jpg (10), cols (10), make (10), leading (10), websites (10), again (10), been (10), want (9), same (9), auto (9), size (9), classes (9), cyan (9), navitem (9), year (9), group (9), easy (9), work (9), back (9), engineer (9), until (9), way (9), styles (8), other (8), started (8), out (8), href (8), gap (8), name (8), radio (8), 733 (8), title (8), head (8), than (8), without (8), why (8), ever (8), colors (7), custom (7), mode (7), even (7), 300 (7), one (7), btn (7), not (7), have (7), true (7), this (7), are (7), going (7), development (7), used (7), how (7), configuration (6), responsive (6), components (6), made (6), 600 (6), between (6), within (6), about (6), scale (6), apply (6), list (6), component (6), rating (6), over (6), input (6), house (6), building (6), makes (6), every (6), feel (6), having (6), better (6), getting (5), what (5), relative (5), mountains (5), modern (5), lorem (5), ipsum (5), dolor (5), sit (5), amet (5), consectetur (5), adipiscing (5), elit (5), augue (5), gravida (5), cras (5), quis (5), duis (5), pretium (5), ullamcorper (5), consequat (5), then (5), everything (5), color (5), 861 (5), top (5), they (5), their (5), nav (5), single (5), users (5), category (5), beach (5), designs (5), value (5), completely (5), anything (5), try (5), cto (5), really (5), writing (5), developers (5), dev (5), after (5), designer (5), real (5), thought (5), would (5), customizing (4), states (4), production (4), editor (4), got (4), faster (4), truncate (4), get (4), code (4), 800 (4), secondary (4), primary (4), body (4), sample (4), integer (4), pellentesque (4), simple (4), box (4), 889 (4), absolute (4), don (4), works (4), movie (4), listitem (4), movies (4), import (4), user (4), form (4), evenodd (4), rule (4), looking (4), such (4), indigo (4), object (4), cover (4), instead (4), because (4), consistent (4), else (4), changed (4), being (4), while (4), still (4), founder (4), docs (4), once (4), its (4), actually (4), need (4), gives (4), team (4), quickly (4), software (4), socks (4), think (4), super (4), last (4), write (4), sarah (4), dayan (4), months (4), spacing (3), theme (3), content (3), reusing (3), support (3), ready (3), m18 (3), outline (3), these (3), names (3), features (3), sans (3), inter (3), prefix (3), typography (3), elegant (3), own (3), shadows (3), change (3), 128 (3), inset (3), 862 (3), 501 (3), m10 (3), add (3), index (3), andrew (3), location (3), 2020 (3), frameworks (3), picks (3), cast (3), runtime (3), genre (3), star (3), react (3), them (3), changes (3), place (3), api (3), 103 (3), normal (3), entire (3), black (3), complex (3), which (3), could (3), most (3), client (3), tiny (3), classic (3), different (3), look (3), fast (3), making (3), teams (3), game (3), changer (3), dan (3), large (3), old (3), ryan (3), working (3), much (3), documentation (3), able (3), long (3), wall (3), didn (3), big (3), looked (3), since (3), thanks (3), times (3), keep (3), okay (3), good (3), products (3), some (3), company (3), there (3), love (3), amazing (3), years (3), frontend (3), implement (3), staff (3), algolia (3), github (2), community (2), customization (2), handling (2), fundamentals (2), core (2), optimizing (2), setup (2), installation (2), fully (2), developed (2), hundreds (2), help (2), find (2), perfect (2), point (2), move (2), cssconflict (2), applies (2), property (2), problems (2), 002 (2), 997 (2), ease (2), 256 (2), fit (2), com (2), worried (2), integration (2), tools (2), rows (2), transforms (2), template (2), gradients (2), state (2), visible (2), greatest (2), experience (2), enjoyable (2), serif (2), display (2), range (2), brutalist (2), playful (2), config (2), file (2), set (2), literally (2), palette (2), scaling (2), heroku (2), 6v12 (2), m14 (2), next (2), 5v3 (2), 111c0 (2), 491 (2), 398 (2), 363 (2), 734 (2), 166 (2), skip (2), seconds (2), evenly (2), rect (2), 362 (2), 096 (2), 865 (2), left (2), abbr (2), those (2), throw (2), active (2), footer (2), accept (2), decline (2), description (2), 00am (2), extract (2), vincent (2), rated (2), releases (2), divide (2), john (2), clarke (2), rochelle (2), zach (2), truth (2), section (2), 5a1 (2), 1v3h3a1 (2), 3v3a1 (2), 3h6a1 (2), 2h3v6a1 (2), header (2), filter (2), placeholder (2), clip (2), style (2), something (2), main (2), two (2), close (2), self (2), collingwood (2), 655 (2), interior (2), 2xl (2), max (2), accessible (2), workcation (2), watch (2), sucks (2), right (2), initial (2), meta (2), removes (2), unused (2), ship (2), performance (2), free (2), shipping (2), 172 (2), 656 (2), buy (2), jacket (2), site (2), twice (2), sizing (2), seriously (2), constraints (2), well (2), constraint (2), based (2), give (2), come (2), david (2), will (2), career (2), provides (2), bespoke (2), website (2), around (2), helps (2), process (2), efficient (2), campbell (2), turns (2), abstraction (2), letting (2), hard (2), initially (2), number (2), however (2), hooked (2), workflow (2), senior (2), implementing (2), rapid (2), systems (2), great (2), also (2), improved (2), skills (2), needed (2), digital (2), skeptical (2), feels (2), wrong (2), before (2), banging (2), against (2), sense (2), spaghetti (2), wondering (2), sites (2), future (2), convert (2), styling (2), itself (2), devops (2), already (2), bootstrap (2), always (2), part (2), bad (2), confidence (2), clicked (2), another (2), productivity (2), wordpress (2), tech (2), educator (2), lot (2), biggest (2), aaron (2), pair (2), put (2), matter (2), productive (2), joy (2), programmer (2), yet (2), may (2), gave (2), regular (2), very (2), spend (2), javascript (2), pure (2), allows (2), many (2), create (2), traditional (2), wonder (2), complete (2), realize (2), might (2), semantic (2), life (2), easier (2), quicker (2), maintain (2), worry (2), kumar (2), skeptic (2), best (2), past (2), luke (2), worked (2), ass (2), instantly (2), had (2), hype (2), few (2), idiot (2), adapts (2), customize (2), seen (2), figure (2), figcaption (2), blockquote (2), search (2), rapidly (2), leaving (2), youtube, twitter, discord, presets, plugins, screens, functions, directives, adding, concepts, upgrade, guide, browser, preprocessors, collection, beautiful, designed, creators, examples, choose, guaranteed, starting, email, 118l, 4v14a2, 2h12a2, 2v8, 118z, 003, 884l10, 882l7, 998a2, 0016, 4h4a2, 884z, viewbox, http, www, org, 2000, xmlns, inline, transparent, transition, duration, 150, facepad, facearea, format, ixid, eyjhchbfawqiojeymdd9, https, images, unsplash, photo, 1494790108377, be9c29b29330, ixlib, shrink, regional, paradigm, technician, admin, teal, jane, cooper, intelligent, autocomplete, suggestions, linting, definitions, required, remembering, intellisense, extension, covered, world, ide, flow, filters, columns, composable, powered, variables, selectors, tons, unapologetically, takes, advantage, latest, possible, cutting, edge, comfort, zone, module, 0f172a, 1e293b, 334155, 475569, 64748b, 94a3b8, cbd5e1, e2e8f0, f1f5f9, f8fafc, 1e3a8a, 1e40af, 1d4ed8, 2563eb, 3b82f6, 60a5fa, 93c5fd, bfdbfe, dbeafe, eff6ff, fontfamily, exports, 14pt, aabbcc, craft, let, transform, includes, expertly, crafted, defaults, customized, mouse, cursor, extend, tweak, 6v12l8, m19, 889h15, m17, 509, 95c, 365, 711, 759, 991, 176, pause, 889h9, 492, 95c2, 0a7, 226, rewind, 6v12l, previous, 931c7, 853, 905, 5h6, 19c16, 147, 931v19l, 4v6, 931z, favorites, tabular, nums, 4550, valuemax, valuemin, 1456, valuenow, music, progress, progressbar, role, overflow, episode, min, png, disable, blinds, people, open, phone, 2am, enable, background, article, sky, base, mcdonald, attendees, meeting, kitchener, est, thu, nov, date, weekly, directive, repeated, patterns, copying, pasting, key, map, isactive, classname, return, function, default, export, idris, elba, cena, thandiwe, newton, action, 18a, death, blow, emilia, 56m, romance, simon, pegg, galifianakis, 46m, comedy, 2021, prognosis, negative, blade, angular, vue, repeating, utilities, partial, boom, source, duplication, driven, dashed, solid, avatar, url, appearance, 4a4, 000, 8zm2, 8a6, 1110, 476l4, 817, 817a1, 414, 414l, 816, 816a6, 012, pointer, events, customer, success, onboarding, emails, human, resources, benefits, plan, engineering, stick, beginning, fancy, invented, ourselves, disabled, variants, sunny, spacious, room, traveling, light, comfy, cosy, lay, night, sits, vibrant, neighborhood, littered, cafes, pubs, restaurants, supermarkets, major, attractions, edinburgh, castle, arthur, seat, check, availability, ontario, 11a2, 034c18, 897, 19s, 966c6, 819, 5s6, 034z, circle, m12, 5h5l, 5l12, 16l, 3l9, 14l, 4h5l2, current, reviews, via, gradient, reverse, 5xl, 4xl, headless, unstyled, trip, suits, official, screen, magically, specific, breakpoint, wrestling, bunch, media, queries, lets, mobile, npx, output, terminal, stylesheet, rel, link, document, device, viewport, utf, charset, lang, doctype, package, json, automatically, means, final, bundle, smallest, possibly, fact, less, 10kb, continental, orders, 172a4, 015, 0l10, 343l1, 171a4, 115, 656l10, 657l, 828, 829a4, 010, 656z, bag, submit, baseline, stock, 110, wrap, low, level, encourages, whatever, littering, stylesheets, arbitrary, values, choices, engineered, show, jacob, graf, convinced, said, quartix, paluy, unlocked, cheat, jason, beggs, freelance, allowing, australian, michael, dyrynda, flexibility, infinitely, customizable, shoehorned, cut, cloth, jeff, sagal, ecosystem, giant, turbocharger, agencies, designers, develop, shared, language, speeds, teamwork, trevor, bothered, vanilla, waste, bother, learned, ton, anyway, middleground, thoughtful, break, subscriptionbox, brooking, pushed, mention, due, minutes, annoying, guy, pushing, anyone, who, listen, simplified, beyond, measurement, crateandbarrel, gayle, doesn, hopping, tesla, dad, rusted, minnesota, farm, truck, sure, clutch, slipping, brakes, barely, filled, tires, anymore, chenkie, isn, yell, take, deep, breath, run, npm, install, featureboard, corey, ginnivan, bridges, reintroduces, context, limits, cognitive, load, choice, architecture, grants, access, token, library, incredibly, pickup, helped, jess, archer, instinctively, hated, converted, reignited, excitement, operations, lead, bettercloud, ian, gaenssley, accelerant, prototyping, strong, helpful, instant, results, josh, manders, overall, wonderful, handwrite, joshua, lowe, wondered, application, prototype, hellmann, resisted, doing, slow, marc, köhlbrugge, trying, earlier, hurts, hole, least, pleasant, brown, agency, deal, unique, each, nightmare, favor, jan, hollander, tried, keeps, glenn, meyer, felt, confident, designing, apps, knickerbocker, magic, documented, pleasure, network, administrator, sergio, peris, know, giving, decided, switch, mawla_io, malone, hardest, offering, service, port, call, igor, randjelovic, almost, immediately, picture, myself, bem, happy, public, release, high, member, laravelphp, nuno, maduro, greg, sullivan, offer, clients, turnaround, themes, both, builds, revisions, maker, pieter, levels, shruti, balasa, discovered, learnt, creating, pages, kent, dodds, brent, garner, solves, problem, compromising, enabling, imaginable, sanjay, soundarajan, handedly, impactful, glad, live, universe, where, exists, francis, søren, kottal, unified, across, methodology, stability, neil, docherty, nice, president, agilitycms, joel, varty, revolutionized, pipeline, cli, consistently, zac, jordan, zajdel, seems, step, backward, absolutely, nothing, comes, during, phase, braunson, yager, drastically, primitive, jerred, hurst, took, discussion, implemented, wide, breeze, jump, enhancements, matthias, schmidt, burned, abandoned, fear, bet, disappear, couldn, happier, improving, meaningful, ways, basis, alive, hugh, durkin, tachyons, steroids, lance, armstrong, winning, tour, france, seven, course, scandal, shame, matija, marohnić, eject, complexity, abstracting, away, powerful, gets, obvious, matt, swanson, chore, fall, unplatform, avivasolutions, joost, meijles, wasn, comfortable, met, combined, excellent, marco, singhof, slowly, migrate, feature, benefiting, upfront, kahlil, lechelt, implementation, configurable, powers, clean, integrates, genius, charlie, joseph, seem, amaze, updates, aided, boring, ivan, guzman, ability, cup, coffee, chase, giunta, alleviated, become, accustomed, christopher, pitt, easiest, simplest, imagine, boris, lepikhin, turned, beyondcode, marcel, pociot, enjoy, madeline, came, job, days, personal, trey, piepmeier, bridging, becoming, defacto, styptapp, didier, catz, tool, ben, furfie, 2017, wrote, frequently, coincidence, released, mistake, program, manager, microsoft, debbie, brien, ten, etc, jake, smith, total, jilson, thomas, bring, mental, exercise, understanding, hierarchy, behind, christian, holman, amount, skipping, conversion, brainwaves, speed, fullstack, blissful, launchpathinc, mannie, schumpert, nearing, completion, rewriting, typescript, wow, rocks, sumit, admit, million, abstract, properties, uis, awesome, stuff, found, hadn, done, early, nineties, mean, ends, empowering, crazy, impressive, kelvin, omereshone, mind, rotimi, began, copy, sveltejs, breaking, evan, payne, remember, horrified, saw, increasing, joyful, things, sam, carré, rather, constraining, standardization, exactly, bennett, example, preconceptions, aside, evaluating, streets, ahead, believed, school, thinking, nick, saraev, scalable, eric, barnes, kicked, later, saving, knew, together, dennis, walsh, trajectory, business, performing, vasu, bansal, annoyances, multiple, praveen, gilliland, unpleasant, jon, bloomer, spent, day, poc, wish, considering, rebuild, ruby, ios, redpath, finally, weeks, hand, jad, limcaco, ken, wheeler, trendyminds, bushnell, officially, train, ridiculously, flexible, graeme, houston, thing, handful, pain, gilbert, rabut, tsurwa, loved, moment, dacey, nolan, fell, modifiers, thorough, palettes, former, wwe, champion, bret, hitman, hart, planet, codesandbox, sara, vieira, wanted, vercel, guillermo, rauch, recommend, programming, today, remix, training, florence, testimonials, creator, adam, wathan, written, reason, believe, suppress, urge, retch, enough, chance, thousand, words, practices, 512, 384, quick, packed, composed, directly, markup, rotate, showcase, blog, navigation,
Text of the page (random words):
bg none sm row start 2 sm p 0 lg row start 1 h1 class mt 1 text lg font semibold text white sm text slate 900 md text 2xl dark sm text white beach house in collingwood h1 p class text sm leading 4 font medium text white sm text slate 500 dark sm text slate 400 entire house p div div class grid gap 4 col start 1 col end 3 row start 1 sm mb 6 sm grid cols 4 lg gap 6 lg col start 2 lg row end 6 lg row span 6 lg mb 0 img src beach house jpg alt class w full h 60 object cover rounded lg sm h 52 sm col span 2 lg col span full loading lazy img src beach house interior 1 jpg alt class hidden w full h 52 object cover rounded lg sm block sm col span 2 md col span 1 lg row start 2 lg col span 2 lg h 32 loading lazy img src beach house interior 2 jpg alt class hidden w full h 52 object cover rounded lg md block lg row start 2 lg col span 2 lg h 32 loading lazy div dl class mt 4 text xs font medium flex items center row start 2 sm mt 1 sm row start 3 md mt 2 5 lg row start 2 dt class sr only reviews dt dd class text indigo 600 flex items center dark text indigo 400 svg width 24 height 24 fill none aria hidden true class mr 1 stroke current dark stroke indigo 500 path d m12 5 2 5h5l 4 4 2 103 5l12 16l 5 103 3l9 14l 4 4h5l2 5z stroke width 2 stroke linecap round stroke linejoin round svg span 4 89 span class text slate 400 font normal 128 span span dd dt class sr only location dt dd class flex items center svg width 2 height 2 aria hidden true fill currentcolor class mx 3 text slate 300 circle cx 1 cy 1 r 1 svg svg width 24 height 24 fill none stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round class mr 1 text slate 400 dark text slate 500 aria hidden true path d m18 11 034c18 14 897 12 19 12 19s 6 4 103 6 7 966c6 7 655 8 819 5 12 5s6 2 655 6 6 034z path d m14 11a2 2 0 1 1 4 0 2 2 0 0 1 4 0z svg collingwood ontario dd dl div class mt 4 col start 1 row start 3 self center sm mt 0 sm col start 2 sm row start 2 sm row span 2 lg mt 6 lg col start 1 lg row start 3 lg row end 4 button type button class bg indigo 600 text white text sm leading 6 font medium py 2 px 3 rounded lg check availability button div p class mt 4 text sm leading 6 col start 1 sm col span 2 lg mt 6 lg row start 4 lg col span 1 dark text slate 400 this sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two this beach house sits in a vibrant neighborhood littered with cafes pubs restaurants and supermarkets and is close to all the major attractions such as edinburgh castle and arthur s seat p div main state variants hover and focus states we got em want to style something on hover stick hover at the beginning of the class you want to add works for focus active disabled focus within focus visible and even fancy states we invented ourselves like group hover learn more handling hover focus and other states projects new title api integration category engineering users title new benefits plan category human resources users title onboarding emails category customer success users new project 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 section header class bg white space y 4 p 4 sm px 8 sm py 6 lg p 4 xl px 8 xl py 6 div class flex items center justify between h2 class font semibold text slate 900 projects h2 a href new class hover bg blue 400 group flex items center rounded md bg blue 500 text white text sm font medium pl 2 pr 3 py 2 shadow sm svg width 20 height 20 fill currentcolor class mr 2 aria hidden true path d m10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h 3v3a1 1 0 1 1 2 0v 3h6a1 1 0 1 1 0 2h3v6a1 1 0 0 1 1 1z svg new a div form class group relative svg width 20 height 20 fill currentcolor class absolute left 3 top 1 2 mt 2 5 text slate 400 pointer events none group focus within text blue 500 aria hidden true path fill rule evenodd clip rule evenodd d m8 4a4 4 0 100 8 4 4 0 000 8zm2 8a6 6 0 1110 89 3 476l4 817 4 817a1 1 0 01 1 414 1 414l 4 816 4 816a6 6 0 012 8z svg input class focus ring 2 focus ring blue 500 focus outline none appearance none w full text sm leading 6 text slate 900 placeholder slate 400 rounded md py 2 pl 10 ring 1 ring slate 200 shadow sm type text aria label filter projects placeholder filter projects form header ul class bg slate 50 p 4 sm px 8 sm pt 6 sm pb 8 lg p 4 xl px 8 xl pt 6 xl pb 8 grid grid cols 1 sm grid cols 2 lg grid cols 1 xl grid cols 2 gap 4 text sm leading 6 li x for project in projects a href project url class hover bg blue 500 hover ring blue 500 hover shadow md group rounded md p 3 bg white ring 1 ring slate 200 shadow sm dl class grid sm block lg grid xl block grid cols 2 grid rows 2 items center div dt class sr only title dt dd class group hover text white font semibold text slate 900 project title dd div div dt class sr only category dt dd class group hover text blue 200 project category dd div div class col start 2 row start 1 row end 3 sm mt 4 lg mt 0 xl mt 4 dt class sr only users dt dd x for user in project users class flex justify end sm justify start lg justify end xl justify start space x 1 5 img src user avatar alt user name class w 6 h 6 rounded full bg slate 100 ring 2 ring white loading lazy dd div dl a li li class flex a href new class hover border blue 500 hover border solid hover bg white hover text blue 500 group w full flex flex col items center justify center rounded md border 2 border dashed border slate 300 text sm leading 6 text slate 900 font medium py 3 svg class group hover text blue 500 mb 1 text slate 400 width 20 height 20 fill currentcolor aria hidden true path d m10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h 3v3a1 1 0 1 1 2 0v 3h6a1 1 0 1 1 0 2h3v6a1 1 0 0 1 1 1z svg new project a li ul section component driven worried about duplication don t be if you re repeating the same utilities over and over and over again all you have to do is extract them into a component or template partial and boom you ve got a single source of truth so you can make changes in one place learn more reusing styles react vue angular blade new releases top rated vincent s picks prognosis negative star rating 2 66 rating pg 13 year 2021 genre comedy runtime 1h 46m cast simon pegg zach galifianakis rochelle rochelle star rating 3 25 rating r year 2020 genre romance runtime 1h 56m cast emilia clarke death blow star rating 4 95 rating 18a year 2020 genre action runtime 2h 5m cast idris elba john cena thandiwe newton movies js nav js navitem js list js listitem js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import nav from nav js import navitem from navitem js import list from list js import listitem from listitem js export default function movies movies return div classname divide y divide slate 100 nav navitem href new isactive new releases navitem navitem href top top rated navitem navitem href picks vincent s picks navitem nav list movies map movie listitem key movie id movie movie list div not into component frameworks use tailwind s apply directive to extract repeated utility patterns into custom css classes just by copying and pasting the list of class names learn more reusing styles weekly one on one date and time thu nov 15 2020 10 00am 11 00am est location kitchener on description no meeting description attendees andrew mcdonald decline accept styles css 1 2 3 4 5 6 7 8 9 10 11 12 btn apply text base font medium rounded lg p 3 btn primary apply bg sky 500 text white btn secondary apply bg slate 100 text slate 900 index html 31 32 33 34 35 36 37 38 39 dd div dl footer class grid grid cols 2 gap x 6 button class btn btn secondary decline button button class btn btn primary accept button footer article dark mode now with dark mode don t want to be one of those websites that blinds people when they open it on their phone at 2am enable dark mode in your configuration file then throw dark in front of any color utility to apply it when dark mode is active works for background colors text colors border colors and even gradients learn more dark mode disable dark mode ep 128 scaling css at heroku with utility classes full stack radio 24 16 75 50 1x 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 div class bg white border slate 100 dark bg slate 800 dark border slate 500 border b rounded t xl p 4 pb 6 sm p 10 sm pb 8 lg p 6 xl p 10 xl pb 8 space y 6 sm space y 8 lg space y 6 xl space y 8 div class flex items center space x 4 img src full stack radio png alt width 88 height 88 class flex none rounded lg bg slate 100 loading lazy div class min w 0 flex auto space y 1 font semibold p class text cyan 500 dark text cyan 400 text sm leading 6 abbr title episode ep abbr 128 p h2 class text slate 500 dark text slate 400 text sm leading 6 truncate scaling css at heroku with utility classes h2 p class text slate 900 dark text slate 50 text lg full stack radio p div div div class space y 2 div class relative div class bg slate 100 dark bg slate 700 rounded full overflow hidden div class bg cyan 500 dark bg cyan 400 w 1 2 h 2 role progressbar aria label music progress aria valuenow 1456 aria valuemin 0 aria valuemax 4550 div div div class ring cyan 500 dark ring cyan 400 ring 2 absolute left 1 2 top 1 2 w 4 h 4 mt 2 ml 2 flex items center justify center bg white rounded full shadow div class w 1 5 h 1 5 bg cyan 500 dark bg cyan 400 rounded full ring 1 ring inset ring slate 900 5 div div div div class flex justify between text sm leading 6 font medium tabular nums div class text cyan 500 dark text slate 100 24 16 div div class text slate 500 dark text slate 400 75 50 div div div div div class bg slate 50 text slate 500 dark bg slate 600 dark text slate 200 rounded b xl flex items center div class flex auto flex items center justify evenly button type button aria label add to favorites svg width 24 height 24 path d m7 6 931c7 5 865 7 853 5 8 905 5h6 19c16 147 5 17 5 865 17 6 931v19l 5 4 5 4v6 931z fill currentcolor stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round svg button button type button class hidden sm block lg hidden xl block aria label previous svg width 24 height 24 fill none path d m10 12 8 6v12l 8 6z fill currentcolor stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round path d m6 6v12 stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round svg button button type button aria label rewind 10 seconds svg width 24 height 24 fill none path d m6 492 16 95c2 861 2 733 7 5 2 733 10 362 0 2 861 2 734 2 861 7 166 0 9 9 2 862 2 733 7 501 2 733 10 362 0a7 096 7 096 0 0 0 5 5 8 226 stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round path d m5 5v3 111c0 491 398 889 889 889h9 stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round svg button div button type button class bg white text slate 900 dark bg slate 100 dark text slate 700 flex none my 2 mx auto w 20 h 20 rounded full ring 1 ring slate 900 5 shadow md flex items center justify center aria label pause svg width 30 height 32 fill currentcolor rect x 6 y 4 width 4 height 24 rx 2 rect x 20 y 4 width 4 height 24 rx 2 svg button div class flex auto flex items center justify evenly button type button aria label skip 10 seconds svg width 24 height 24 fill none path d m17 509 16 95c 2 862 2 733 7 501 2 733 10 363 0 2 861 2 734 2 861 7 166 0 9 9 2 862 2 733 7 501 2 733 10 363 0 38 365 711 759 991 1 176 stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round path d m19 5v3 111c0 491 398 889 889 889h15 stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round svg button button type button class hidden sm block lg hidden xl block aria label next svg width 24 height 24 fill none path d m14 12 6 6v12l8 6z fill currentcolor stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round path d m18 6v12 stroke currentcolor stroke width 2 stroke linecap round stroke linejoin round svg button button type button class rounded lg text xs leading 6 font semibold px 2 ring 2 ring inset ring slate 500 text slate 500 dark text slate 100 dark ring 0 dark bg slate 500 1x button div div customization extend it tweak it change it tailwind includes an expertly crafted set of defaults out of the box but literally everything can be customized from the color palette to the spacing scale to the box shadows to the mouse cursor use the tailwind config js file to craft your own design system then let tailwind transform it into your own custom css framework learn more configuration simple playful elegant brutalist typography css class font display font name inter sample aabbcc css class font body font size 14pt sample lorem ipsum dolor sit amet consectetur adipiscing elit ut augue gravida cras quis ac duis pretium ullamcorper consequat integer pellentesque eu lorem ipsum dolor sit amet consectetur adipiscing elit ut augue gravida cras quis ac duis pretium ullamcorper consequat integer pellentesque eu lorem ipsum dolor sit amet consectetur adipiscing elit ut augue gravida cras quis ac duis pretium ullamcorper consequat integer pellentesque eu lorem ipsum dolor sit amet consectetur adipiscing elit ut augue gravida cras quis ac duis pretium ullamcorper consequat integer pellentesque eu lorem ipsum dolor sit amet consectetur adipiscing elit ut augue gravida cras quis ac duis pretium ullamcorper consequat colors css class prefix bg primary range 50 900 sample css class prefix bg secondary range 50 900 sample 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 module exports theme fontfamily display inter system ui sans serif body inter system ui sans serif colors primary 50 eff6ff 100 dbeafe 200 bfdbfe 300 93c5fd 400 60a5fa 500 3b82f6 600 2563eb 700 1d4ed8 800 1e40af 900 1e3a8a secondary 50 f8fafc 100 f1f5f9 200 e2e8f0 300 cbd5e1 400 94a3b8 500 64748b 600 475569 700 334155 800 1e293b 900 0f172a modern features cutting edge is our comfort zone tailwind is unapologetically modern and takes advantage of all the latest and greatest css features to make the developer experience as enjoyable as possible we ve got first class css grid support composable transforms and gradients powered by css variables support for modern state selectors like focus visible and tons more learn more grid template columns css grid transforms filters 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 div class grid grid flow col grid rows 2 grid cols 3 gap 8 div img src mountains 1 jpg alt loading lazy div div class col start 3 img src mountains 2 jpg alt loading lazy div div img src mountains 3 jpg alt loading lazy div div img src mountains 4 jpg alt loading lazy div div class row start 1 col start 2 col span 2 img src mountains 5 jpg alt loading lazy div div editor tools wor...
|