25:["$","title",null,{"children":"Tailwind + CSS Image Grid | UMNI.design | Observable"}] 49:T556,grid = htl.html`

`4a:[] 29:{"id":"9ec738271933cc06","slug":null,"title":"Tailwind + CSS Image Grid","thumbnail":"a9a198fb711058e13ef708498cc284fc5d6b773c5290a3e29f7655445e7d37fa","access_level":"public","create_time":"$D2022-10-22T09:11:55.102Z","update_time":"$D2022-10-24T09:19:54.011Z","view_time":null,"first_public_time":"$D2022-10-22T09:11:55.102Z","has_unpublished_edits":null,"fork":{"id":"f150ffba604046fb","slug":"tailwind-css-photo-card","title":"Tailwind CSS Photo + Card","owner":{"id":"eceee348d9a55ccd","login":"design","name":"UMNI.design"}},"stars":4,"starred":false,"owner":{"type":"team","id":"eceee348d9a55ccd","login":"design","name":"UMNI.design","avatar_url":"https://avatars-next.observableusercontent.com/da616e8c8af7bc2118b13ab7e705c06985896777ed897b48242d3f052b3dccec","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":173,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"team","id":"eceee348d9a55ccd","login":"design","name":"UMNI.design","avatar_url":"https://avatars-next.observableusercontent.com/da616e8c8af7bc2118b13ab7e705c06985896777ed897b48242d3f052b3dccec","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tailwind + CSS Image Grid","cells":[{"id":0,"value":"# Tailwind + CSS Image Grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"viewof div_styling = Inputs.textarea({value: \"relative rounded-xs overflow-auto p-2 bg-gray-50\", label: \"Adjust TW Div Styles\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof grid_styling = Inputs.textarea({value: \"grid grid-cols-4 grid-rows-3 grid-flow-row-dense gap-1 font(mono bold) text(white sm center)\", label: \"Adjust TW Grid Styles\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof grid_image_styling = Inputs.textarea({value: \"block w-full rounded-xl aspect-[4/4] object-cover\", label: \"Adjust TW image Styles\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"htl.html`

\n ${photoTile({\n imgUrl: getImageUrl(image_number,{width: 900, height: 600}),\n altText: \"This is a placeholder image.\"\n})}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"//from Saneef\nfunction photoCard({ imgUrl, altText, title, desc }) {\n return htl.html`

${title}

${desc}

\n ${photoCard({\n imgUrl: getImageUrl(image_number,{width: 900, height: 600}),\n altText: \"This is a placeholder image.\",\n title: \"A title for the above random image.\",\n desc: \"It calls for a meaningless description. One more sentence to make it longer. \"\n})}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function photoTile({ imgUrl, altText}) {\n return htl.html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof image_number = Inputs.number({label: \"Adjust Number\", value :\"681\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import { getImageUrl, getRandomImageUrl } from \"@saneef/lorem-picsum\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"tw = initializeTWind({\n invalidation,\n hash: false, // Enable/Disables classname hashing. Makes the classnames readable \n theme: {\n // Extend the default theme with ADB brand stuff.\n extend: {\n fontFamily: {\n sans: `\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"`\n }\n // colors: {\n // brand: {\n // ...mainColors\n // },\n // accent: {\n // ...accentColors\n // }\n // }\n }\n },\n preflight: {\n \"@import\":\n \"url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {initializeTWind} from \"@saneef/tailwindcss\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null