#Anyone help me to get file, i start learning jetstream using livewire
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<x-jet-welcome />
</div>
</div>
</div>
Related
<div className="carousel w-full">
<div id="slide1" className="carousel-item relative w-full">
<img src="/images/stock/photo-1625726411847-8cbb60cc71e6.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide2" className="carousel-item relative w-full">
<img src="/images/stock/photo-1609621838510-5ad474b7d25d.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide3" className="carousel-item relative w-full">
<img src="/images/stock/photo-1414694762283-acccc27bca85.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide4" className="carousel-item relative w-full">
<img src="/images/stock/photo-1665553365602-b2fb8e5d1707.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
</div>
I want to know that is it possibe to do that.I tried a lot to find the solution, but I couldn't. when i look for solution statement in google there is no website to showcase my problem.If anyone know about it please help me to reach out the problem and give a chance to make a better ui .
I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature
<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div
v-for="filter in filterTypes"
:key="filter.type"
class="flex flex-row items-center px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :
<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div class="flex items-center">
<div
v-for="filter in filterTypes"
:key="filter.type"
class=" px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
I can't seem to find a working way for vertically & horizontally centering a div when using tailwindcss.
This is my current code that doesn't particularly works :
<div class="absolute flex items-center justify-center">
<Contact />
</div>
If you have a header and you want to ignore the header and center the content the code goes like:
<div>
<div className="flex h-screen flex-col bg-gray-100">
<header className="text-white text-center fixed top-0 left-0 right-0 bg-blue-600">
Header
</header>
<main className=" flex flex-1 justify-center items-center">
<div className="shadow bg-white rounded-md w-full text-center">
Content
</div>
</main>
</div>
</div>
Try with this example
something like <div class="grid place-items-center h-screen">
I'm developing a project with VueJS. Now I am only including a ready-made template in the Vue project. I haven't written any vue code yet. But I keep getting compile errors. I am sure there is no error in my code. But the error just doesn't go away. I share with you my codes and error message in the component I got an error.
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting </h6>
<h1 class="font-weight--reguler mb-15">Facilitate All <br> Local IT-related Service Providers </h1>
<p>Highly Tailored IT Design, Management Support Services. </p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt="" />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Where is your template tags? You have to write your divs in a template in vue files.
You can look at there for more info: https://v2.vuejs.org/v2/guide/syntax.html
<template>
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting</h6>
<h1 class="font-weight--reguler mb-15">
Facilitate All
<br />Local IT-related Service Providers
</h1>
<p>Highly Tailored IT Design, Management Support Services.</p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
I am new to vuejs2 and trying to create a simple login page with the help of vue material.
<template>
<div class="loginContainer">
<form>
<md-card class="md-layout md-small-size-33 md-medium-size-33">
<md-card-header :data-background-color="dataBackgroundColor">
<h4 class="title">Login</h4>
</md-card-header>
<md-card-content>
<div class="md-layout">
<div class="md-layout-item">
<md-field>
<label>User Name</label>
<md-input v-model="username" type="text"></md-input>
</md-field>
</div>
<div class="md-layout-item md-small-size-100 md-size-33">
<md-field>
<label>Password</label>
<md-input v-model="emailadress" type="password"></md-input>
</md-field>
</div>
</div>
</md-card-content>
</md-card>
</form>
</div>
</template>
in the above code I created a sample login page using vue-material cards.But how can I make these vue-material cards as responsive by using vue-material?