<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
I want to put that avatar on the right beside “APP” on the farthest right, but I can't seem to make it work.
You can use absolute position on the image container and set right to 1rem or similar. The right attribute controls how far from the right the element should be placed. (But there are many other ways to do this)
header {
position: relative;
}
#profile {
position: absolute;
right: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
Try to use margin-left:auto; margin-right:0; on <div id="profile">
#profile{
margin-left: auto;
margin-right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet" />
<header class="bg-red p-5 flex border-b-2 border-white border-b-4">
<h1 class="font-display text-white text-md tracking-tight font-medium uppercase">local app</h1>
<div id="profile">
<img class="h-16 w-16 rounded-full mb-2 border-white border-4" src="{{ asset('assets/images/avatar.jpg') }}" alt="">
</div>
</header>
Related
I need to align the image and the Orange and fruit on the center.
How will I do it the proper and correct way. It needs to align together with others.
Check my playground here CLICK HERE
expected output
<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
<div class="flex flex-col w-full p-12">
<div class="flex flex-col w-full text-center items-center">
<div class="btc">
<button class="btn btn-back">Back</button>
<div class="flex gap-4">
<img src="https://picsum.photos/200/300" class="w-12 h-12" />
<div class="text-left text-white">
<p class="font-bold">Orange</p>
<p class="text-grey">fruit</p>
</div>
</div>
</div>
<h1 class="text-4xl text-white mb-5">
<span class="text-sm font-bold">Food</span>
</h1>
<div class="flex flex-row mt-8 gap-4">
<button class="btn btn-primary">Send Food</button>
<button class="btn btn-yellow">Receive Food</button>
</div>
<div class="flex flex-row mt-8 mb-16">
<button class="btn btn-change flex justify-center items-center">
<span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
<span>Change Food</span>
</button>
</div>
</div>
</div>
</div>
.btc {
#apply w-full mb-16;
display: grid;
grid-gap: 1rem;
grid-template-columns: auto;
justify-content: center;
position: relative;
}
.btn {
#apply text-white text-sm bg-transparent font-normal rounded-full border-2 h-10 w-52;
}
.btn-back {
#apply border-green-500 w-24;
}
.btn-primary {
#apply border-red-700;
}
.btn-yellow {
#apply border-yellow-300;
}
.btn-change {
#apply bg-blue-300 border-0 font-bold;
}
.btn-class {
position: absolute;
left: 0;
top: 0;
}
<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
<div class="flex flex-col w-full p-12">
<div class="flex flex-col w-full text-center items-center">
<div class="btc">
<button class="btn btn-back btn-class">Back</button>
<div class="flex gap-4 new-div-class">
<img src="https://picsum.photos/200/300" class="w-12 h-12" />
<div class="text-left text-white">
<p class="font-bold">Orange</p>
<p class="text-grey">fruit</p>
</div>
</div>
</div>
<h1 class="text-4xl text-white mb-5">
<span class="text-sm font-bold">Food</span>
</h1>
<div class="flex flex-row mt-8 gap-4">
<button class="btn btn-primary">Send Food</button>
<button class="btn btn-yellow">Receive Food</button>
</div>
<div class="flex flex-row mt-8 mb-16">
<button class="btn btn-change flex justify-center items-center">
<span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
<span>Change Food</span>
</button>
</div>
</div>
</div>
</div>
I have edited your play. Here is the new link https://play.tailwindcss.com/qrDlxDYWW3
I want to overlap my image to the transparent header? how can I do that without margin-top: -36px in section? thanks
<header class="bg-transparent shadow-md sticky top-0 z-50">
<div class="flex items-center justify-between">
<img class="h-8" src="/images/eco2.png" alt="">
<div class="border-2 border-red-500">
<a class ="" href="#">Home</a>
<a class ="" href="#">About Us</a>
<a class ="" href="#">Contact Us</a>
<a class ="" href="#">Projects</a>
</div>
</div>
<div class="flex flex-col hidden">
Home
About Us
Contact Us
Projects
</div>
</header>
<section class="h-screen w-full bg-hero-pic" >
</section>
Try this, Tailwind Playground Link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
<title>Tailwind Header by JsWizard</title>
<!---
You may need jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
--->
<style>
/*
You may need this for responsive background
header {
background: url('bg-425.jpg');
}
#media only screen and (min-width:640px) {
header {
background: url('bg-640.jpg');
}
}
#media only screen and (min-width:768px) {
header {
background: url('bg-768.jpg');
}
}
#media only screen and (min-width:1024px) {
header {
background: url('bg-1024.jpg');
}
}
#media only screen and (min-width:1025px) {
header {
background: url('bg-max.jpg');
}
} */
header {
background:url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80');}
</style>
</head>
<body>
<nav id="nav" class="fixed inset-x-0 top-0 flex flex-row justify-between z-10 text-white bg-transparent">
<div class="p-4">
<div class="font-extrabold tracking-widest text-xl">Your Logo</div>
</div>
<!-- Nav Items Working on Tablet & Bigger Sceen -->
<div class="p-4 hidden md:flex flex-row justify-between font-bold">
<a id="hide-after-click" href="#home" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Home</a>
About
Contact Us
Products
</div>
<!-- Burger Nav Button on Mobile -->
<div id="nav-open" class="p-4 md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</div>
</nav>
<!-- Opened Nav in Mobile, you can use javascript/jQuery -->
<div id="nav-opened" class="fixed left-0 right-0 hidden bg-white mx-2 mt-16 rounded-br rounded-bl shadow z-10">
<div class="p-2 divide-y divide-gray-600 flex flex-col">
Home
About
Contact Us
Products
</div>
</div>
<header id="up" class="bg-fixed bg-no-repeat bg-center bg-cover h-screen relative">
<!-- Overlay Background + Center Control -->
<div class="h-screen bg-opacity-50 bg-black flex items-center justify-center" style="background:rgba(0,0,0,0.5);">
<div class="mx-2 text-center">
<h1 class="text-gray-100 font-extrabold text-4xl xs:text-5xl md:text-6xl">This is sample Header design</h1>
<h2 class="text-gray-200 font-extrabold text-3xl xs:text-4xl md:text-5xl leading-tight">by JsWizard</h2>
<div class="inline-flex">
<button class="p-2 my-5 mx-2 bg-indigo-700 hover:bg-indigo-800 font-bold text-white rounded border-2 border-transparent hover:border-indigo-800 shadow-md transition duration-500 md:text-xl">Learn More</button>
</div>
</div>
</div>
</header>
</body>
</html>
You can use position fixed instead of sticky, fixed will remove the div item from the flow which will make the next div (your picture) take its place.
You can add w-full and all other styles you need.
<header class="bg-transparent fixed shadow-md w-full z-50">
If you don't want it to have the behavior of sticky just use absolute instead, absolute also removes it from the flow but the main difference absolute change position according to it's parent and it stays there, fixed keeps its position according to the screen not parent.
So this is the code I am working with:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
I am having issues getting the image to constrain to the parent div. What I want to accomplish is to have the user image constrain inside the parent div and not overflow outside the border. The image attached is what it looks like now. I have no idea what I am doing wrong or missing.
make it a flexbox container
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
OR CSS grid:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 grid">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0 h-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
Use flex flex-col on parent container and add min-h-0 to image.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
</div>
</div>
how to make a triangle with tailwindCss without plugin ??
You may try using transform:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-bottom-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-right"></div>
</div>
You can also try using borders
tailwind playground
<!-- down -->
<div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>
<!-- up -->
<div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>
<!-- left -->
<div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>
<!-- right -->
<div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div>
Maybe you want to use the triangle for tooltip. (such search got me here):
<div class="group relative mt-4 ml-4 inline-block">
<button type="button" class="rounded-md border border-neutral-600 px-1">...</button>
<!-- container for triangle and the menu ↓-->
<div class="invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible">
<div class="ml-2 -mb-[1px] inline-block overflow-hidden"> <!-- ← triangle container -->
<!-- triangle ↓ -->
<div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div>
</div>
<!-- menu ↓ -->
<div class="flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1">
<div class="cursor-pointer hover:underline">Do amazing stuff</div>
<div class="cursor-pointer hover:underline">Go back</div>
</div>
</div>
</div>
Demo on play.tailwindcss.com
Based on:
#temani-afif answer
https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md
By pseudo-element (small triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>small triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▴']"></div>
<div class="before:content-['▾']"></div>
<div class="before:content-['◂']"></div>
<div class="before:content-['▸']"></div>
</div>
By pseudo-element (normal triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>normal triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▲']"></div>
<div class="before:content-['▼']"></div>
<div class="before:content-['◀']"></div>
<div class="before:content-['▶']"></div>
</div>
By border:
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border</div>
<div class="flex gap-x-3">
<div class="w-0 h-0 border-8 border-solid border-transparent border-b-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-t-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-r-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-l-black"></div>
</div>
By border (simplify):
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border (simplify)</div>
<style type="text/tailwindcss">
#layer components { .triangle { #apply w-0 h-0 border-8 border-solid border-transparent } }
</style>
<div class="flex gap-x-3">
<div class="triangle border-b-black"></div>
<div class="triangle border-t-black"></div>
<div class="triangle border-r-black"></div>
<div class="triangle border-l-black"></div>
</div>
I'm trying to create two side-by-side containers in Tailwind CSS, that grow independently.
My problem is that they are growing at the same time, i.e. when I click on a Question, both containers increase their size. I want only to grow the one from the selected question.
I've also tried with flexbox, but the result is the same.
Here's the code
<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
<!-- First container (left) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 1</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
<!-- Second container (right) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 2</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
</div>
Here's the fiddle
Obs: you have to have the screen at medium breakpoint or higher to see
Simply add items-start to the grid container:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2 items-start">
<!-- First container (left) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 1</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
<!-- Second container (right) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 2</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
</div>
</body>
</html>