Containers
Full-width on mobile, constrained with padded content above
< div class = "mx-auto max-w-7xl sm:px-6 lg:px-8" > <!-- Content goes here --> </ div > Constrained with padded content
< div class = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" > <!-- Content goes here --> </ div > Full-width on mobile, constrained to breakpoint with padded content above mobile
< div class = "container mx-auto sm:px-6 lg:px-8" > <!-- Content goes here --> </ div > Constrained to breakpoint with padded content
< div class = "container mx-auto px-4 sm:px-6 lg:px-8" > <!-- Content goes here --> </ div > Narrow constrained with padded content
< div class = "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" > <!-- We've used 3xl here, but feel free to try other max-widths based on your needs --> < div class = "mx-auto max-w-3xl" > <!-- Content goes here --> </ div > </ div > Cards
Basic card
< div class = "overflow-hidden rounded-lg bg-white shadow" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > Card, edge-to-edge on mobile
<!-- Be sure to use this with a layout container that is full-width on mobile --> < div class = "overflow-hidden bg-white shadow sm:rounded-lg" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > < div class = "divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow" > < div class = "px-4 py-5 sm:px-6" > <!-- Content goes here --> <!-- We use less vertical padding on card headers on desktop than on body sections --> </ div > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > < div class = "divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > < div class = "px-4 py-4 sm:px-6" > <!-- Content goes here --> <!-- We use less vertical padding on card footers at all sizes than on headers or body sections --> </ div > </ div > < div class = "divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow" > < div class = "px-4 py-5 sm:px-6" > <!-- Content goes here --> <!-- We use less vertical padding on card headers on desktop than on body sections --> </ div > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > < div class = "px-4 py-4 sm:px-6" > <!-- Content goes here --> <!-- We use less vertical padding on card footers at all sizes than on headers or body sections --> </ div > </ div > < div class = "overflow-hidden rounded-lg bg-white shadow" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > < div class = "bg-gray-50 px-4 py-4 sm:px-6" > <!-- Content goes here --> <!-- We use less vertical padding on card footers at all sizes than on headers or body sections --> </ div > </ div > Card with gray body
< div class = "overflow-hidden rounded-lg bg-white shadow" > < div class = "px-4 py-5 sm:px-6" > <!-- Content goes here --> <!-- We use less vertical padding on card headers on desktop than on body sections --> </ div > < div class = "bg-gray-50 px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > Well
< div class = "overflow-hidden rounded-lg bg-gray-50" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > Well on gray
< div class = "overflow-hidden rounded-lg bg-gray-200" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > Well, edge-to-edge on mobile
<!-- Be sure to use this with a layout container that is full-width on mobile --> < div class = "overflow-hidden bg-gray-50 sm:rounded-lg" > < div class = "px-4 py-5 sm:p-6" > <!-- Content goes here --> </ div > </ div > List containers
Simple with dividers
< ul role = "list" class = "divide-y divide-gray-200" > < li class = "py-4" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > Card with dividers
< div class = "overflow-hidden rounded-md bg-white shadow" > < ul role = "list" class = "divide-y divide-gray-200" > < li class = "px-6 py-4" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > </ div > Card with dividers, full-width on mobile
< div class = "overflow-hidden bg-white shadow sm:rounded-md" > < ul role = "list" class = "divide-y divide-gray-200" > < li class = "px-4 py-4 sm:px-6" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > </ div > Separate cards
< ul role = "list" class = "space-y-3" > < li class = "overflow-hidden rounded-md bg-white px-6 py-4 shadow" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > Separate cards, full-width on mobile
< ul role = "list" class = "space-y-3" > < li class = "overflow-hidden bg-white px-4 py-4 shadow sm:rounded-md sm:px-6" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > Flat card with dividers
< div class = "overflow-hidden rounded-md border border-gray-300 bg-white" > < ul role = "list" class = "divide-y divide-gray-300" > < li class = "px-6 py-4" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > </ div > Simple with dividers, full-width on mobile
< ul role = "list" class = "divide-y divide-gray-200" > < li class = "px-4 py-4 sm:px-0" > <!-- Your content --> </ li >
<!-- More items... --> </ ul > Dividers
With label
< div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-center" > < span class = "bg-white px-2 text-sm text-gray-500" >Continue</ span > </ div > </ div > With icon
< div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-center" > < span class = "bg-white px-2 text-gray-500" > < svg class = "size-5 text-gray-500" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path d = "M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" /> </ svg > </ span > </ div > </ div > With label on left
< div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-start" > < span class = "bg-white pr-2 text-sm text-gray-500" >Continue</ span > </ div > </ div > With title
< div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-center" > < span class = "bg-white px-3 text-base font-semibold text-gray-900" >Projects</ span > </ div > </ div > With title on left
< div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-start" > < span class = "bg-white pr-3 text-base font-semibold text-gray-900" >Projects</ span > </ div > </ div > < div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-center" > < button type = "button" class = "inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" > < svg class = "-ml-1 -mr-0.5 size-5 text-gray-400" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path d = "M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" /> </ svg > Button text </ button > </ div > </ div > < div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex items-center justify-between" > < span class = "bg-white pr-3 text-base font-semibold text-gray-900" >Projects</ span > < button type = "button" class = "inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" > < svg class = "-ml-1 -mr-0.5 size-5 text-gray-400" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path d = "M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" /> </ svg > < span >Button text</ span > </ button > </ div > </ div > < div class = "relative" > < div class = "absolute inset-0 flex items-center" aria-hidden = "true" > < div class = "w-full border-t border-gray-300" ></ div > </ div > < div class = "relative flex justify-center" > < span class = "isolate inline-flex -space-x-px rounded-md shadow-sm" > < button type = "button" class = "relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" > < span class = "sr-only" >Edit</ span > < svg class = "size-5" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path d = "m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" /> </ svg > </ button > < button type = "button" class = "relative inline-flex items-center bg-white px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" > < span class = "sr-only" >Attachment</ span > < svg class = "size-5" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path fill-rule = "evenodd" d = "M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule = "evenodd" /> </ svg > </ button > < button type = "button" class = "relative inline-flex items-center bg-white px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" > < span class = "sr-only" >Annotate</ span > < svg class = "size-5" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path fill-rule = "evenodd" d = "M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z" clip-rule = "evenodd" /> </ svg > </ button > < button type = "button" class = "relative inline-flex items-center rounded-r-md bg-white px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" > < span class = "sr-only" >Delete</ span > < svg class = "size-5" viewBox = "0 0 20 20" fill = "currentColor" aria-hidden = "true" data-slot = "icon" > < path fill-rule = "evenodd" d = "M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule = "evenodd" /> </ svg > </ button > </ span > </ div > </ div > Basic
< div class = "flex" > < div class = "mr-4 shrink-0" > < svg class = "size-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > Aligned to center
< div class = "flex" > < div class = "mr-4 shrink-0 self-center" > < svg class = "size-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > Aligned to bottom
< div class = "flex" > < div class = "mr-4 shrink-0 self-end" > < svg class = "size-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > Stretched to fit
< div class = "flex" > < div class = "mr-4 shrink-0" > < svg class = "h-full w-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > < div class = "flex" > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > < div class = "ml-4 shrink-0" > < svg class = "size-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > </ div > Basic responsive
< div class = "sm:flex" > < div class = "mb-4 shrink-0 sm:mb-0 sm:mr-4" > < svg class = "size-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > Wide responsive
< div class = "sm:flex" > < div class = "mb-4 shrink-0 sm:mb-0 sm:mr-4" > < svg class = "h-32 w-full border border-gray-300 bg-white text-gray-300 sm:w-32" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > Nested
< div class = "flex" > < div class = "mr-4 shrink-0" > < svg class = "size-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p >
< div class = "mt-6 flex" > < div class = "mr-4 shrink-0" > < svg class = "size-12 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > < div class = "mt-6 flex" > < div class = "mr-4 shrink-0" > < svg class = "size-12 border border-gray-300 bg-white text-gray-300" preserveAspectRatio = "none" stroke = "currentColor" fill = "none" viewBox = "0 0 200 200" aria-hidden = "true" > < path vector-effect = "non-scaling-stroke" stroke-width = "1" d = "M0 0l200 200M0 200L200 0" /> </ svg > </ div > < div > < h4 class = "text-lg font-bold" >Lorem ipsum</ h4 > < p class = "mt-1" >Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.</ p > </ div > </ div > </ div > </ div >