Fix components padding

This commit is contained in:
khatabwedaa
2020-05-26 11:10:09 +02:00
parent 90133d0b65
commit d5bcbe470e
19 changed files with 20 additions and 20 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="container mx-auto px-6 pb-12">
<div class="container mx-auto px-6">
<div class="py-16 text-center">
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-red-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-blue-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-sm bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
<div class="w-2 bg-gray-800"></div>
<div class="flex items-center px-2 py-3">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-green-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-yellow-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
<div class="flex justify-between items-center">
<span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
<div>
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div class="px-4 py-2">
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div class="w-1/3 bg-cover"
style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex flex-col justify-center items-center max-w-sm mx-auto">
<div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center">

View File

@@ -1,6 +1,6 @@
<template>
<div :id="name | toId">
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg my-10">
<div class="px-3 my-16" :id="name | toId">
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
<div class="flex justify-center md:justify-end -mt-16">
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
<img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<div class="flex items-center px-6 py-3 bg-gray-900">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
<div class="py-6 px-6 md:px-8 md:py-0">

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="bg-white w-full max-w-sm rounded-lg overflow-hidden mx-auto">
<div class="py-4 px-6">
<div class="text-center font-bold text-gray-700 text-3xl">Brand</div>

View File

@@ -1,5 +1,5 @@
<template>
<div :id="name | toId">
<div class="px-3" :id="name | toId">
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>

View File

@@ -35,7 +35,7 @@
</div>
</div>
<div class="flex justify-center items-center p-3 sm:p-6">
<div class="flex justify-center items-center">
<div class="w-full relative" :dir="rtl? 'rtl' : 'ltr'">
<slot class="w-full h-full absolute top-0 left-0" name="component"></slot>
<transition name="fade">