devinschumacher

title	tags
Common Webpage Layouts With TailwindCSS Using CSS Grid & Flex box (w/ Code Examples)	css frontend tailwind css grid css flex box

Creating Common Webpage Layouts With TailwindCSS Using CSS Grid & CSS Flex box (w/ Code Examples)

• CSS Grid: for the main page layout (header, main content, sidebar, footer)
• CSS Flexbox: for smaller components within those grid areas (like navigation menus, lists of items, or aligning content within a section)

EteimZ

const http = require('http');
const fs = require('fs');
const url = require('url');

// Simulated user data
const users = [
  { id: 1, username: 'john_doe', password: 'password123' },
  { id: 2, username: 'jane_smith', password: 'example456' }
];

stokito

CGI samples

CGI Variables

Standard set of Common Gateway Interface environment variable are described in RFC3875. For example:

CONTENT_TYPE=application/x-www-form-urlencoded
GATEWAY_INTERFACE=CGI/1.1
REMOTE_ADDR=192.168.1.180
QUERY_STRING=Zbr=1234567&SrceMB=&ime=jhkjhlkh+klhlkjhlk+%A9%D0%C6%AE%C6%AE&prezime=&sektor=OP
REMOTE_PORT=2292

boaglio

Intro

Pedi para a OpenAI listar todas as anotações do Spring Core 5 e exemplos.

Juntando as respostas, esse foi o resultado:

• AliasFor
• Autowired
• Bean
• Component

ifindev

Tailwind Kanban

A simple exploration to build a kanban board using css grid in Tailwind CSS. So it's about 187 lines for just the mockup. This is totally normal because I just use plain HTML. For the next update, I will use Vue component to recreate it since it will clean up the code and more reusable.

Anyway, the UI is already responsive. But since I am using grids, I haven't figure out how to apply a horizontal scroll bar for the overflow case just like a normal kanban boards. Also, open up Tailwind Play to try out this project.

The design is inpired from this image.

AlmisbahTS

<!-- component -->
<div class="min-h-screen flex items-center justify-center bg-gray-100 py-6">
		<div class="flex w-full max-w-xs p-4 bg-gray-800">
			<ul class="flex flex-col w-full">
				<li class="my-px">
					<a href="#"
					   class="flex flex-row items-center h-12 px-4 rounded-lg text-gray-600 bg-gray-100">
						<span class="flex items-center justify-center text-lg text-gray-500">
							<svg fill="none"
								 stroke-linecap="round"

superjojo140

This sounds easy but... it isn't!

Client side

Use this fetch options:

fetch('superUnsecureCorsUrl',{
   credentials: 'include'
})

john-raymon

Authentication

• authentication: verifying identity (401 Unauthorized)
• authorization: verifying permissions (403 Forbidden)

Username/password scheme

• stateful/session-based/cookie-based (i.e. session using a cookie)
• stateless/token-based (i.e. token using JWT / OAuth / other)

fayazara

<template>
  <section class="grid grid-cols-2 gap-2 mb-6">
    <div class="rounded-md shadow-md bg-gray-800 p-4 w-full">
      <svg
        class="w-16 h-16 mx-auto"
        fill="currentColor"
        stroke="currentColor"
        viewBox="0 0 384 384"
      >
        <path

BjornDCode

// Source: https://twitter.com/calebporzio/status/1151876736931549185

<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>
    
    <main>
        // Content
    </main>