0
Kayıt Ol

Bu kodu html içersinde tek kod olarak nasıl çalıştırırım yardımcı olurmusunuz

4

●

144

  • 18-04-2023, 13:52:18
    #2
    lancelot
    lancelot
    CSS kodlarını 
    <body>
    etiketinden önce 
    <style> </style>
    tagleri arasına javascript kodlarını 
    </body>
    etiketinden sonra 
    <script></script>
    tagleri arasına alırsanız çalışacaktır.
  • 18-04-2023, 13:52:54
    #3
    serkanhzl
    serkanhzl 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* This is Generated Tailwind CSS. See current config in JS Part */
/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com*/ /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
html {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
        sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
hr {
    height: 0;
    color: inherit;
}
abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo,
        monospace;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
table {
    text-indent: 0;
    border-color: inherit;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button,
select {
    text-transform: none;
}
button {
    -webkit-appearance: button;
}
legend {
    padding: 0;
}
progress {
    vertical-align: initial;
}
summary {
    display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}
button {
    background-color: initial;
    background-image: none;
}
fieldset,
ol,
ul {
    margin: 0;
    padding: 0;
}
ol,
ul {
    list-style: none;
}
html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5;
}
body {
    font-family: inherit;
    line-height: inherit;
}
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid;
}
hr {
    border-top-width: 1px;
}
img {
    border-style: solid;
}
textarea {
    resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 1;
    color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}
button {
    cursor: pointer;
}
table {
    border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}
a {
    color: inherit;
    text-decoration: inherit;
}
button,
input,
optgroup,
select,
textarea {
    padding: 0;
    line-height: inherit;
    color: inherit;
}
code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        Liberation Mono, Courier New, monospace;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle;
}
img,
video {
    max-width: 100%;
    height: auto;
}
*,
:after,
:before {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.inset-x-3 {
    left: 0.75rem;
    right: 0.75rem;
}
.top-3 {
    top: 0.75rem;
}
.top-1\/2 {
    top: 50%;
}
.right-0 {
    right: 0;
}
.bottom-1 {
    bottom: 0.25rem;
}
.left-2 {
    left: 0.5rem;
}
.left-2\.5 {
    left: 0.625rem;
}
.left-1\/2 {
    left: 50%;
}
.m-6 {
    margin: 1.5rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.box-content {
    box-sizing: initial;
}
.flex {
    display: flex;
}
.table {
    display: table;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-8 {
    height: 2rem;
}
.h-52 {
    height: 13rem;
}
.h-4\/5 {
    height: 80%;
}
.h-full {
    height: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-8 {
    width: 2rem;
}
.w-36 {
    width: 9rem;
}
.w-full {
    width: 100%;
}
.max-w-2xl {
    max-width: 42rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.transform {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x))
        translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))
        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/2 {
    --tw-translate-x: 50%;
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
}
.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
}
@-webkit-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@-webkit-keyframes ping {
    75%,
    to {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes ping {
    75%,
    to {
        transform: scale(2);
        opacity: 0;
    }
}
@-webkit-keyframes pulse {
    50% {
        opacity: 0.5;
    }
}
@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}
@-webkit-keyframes bounce {
    0%,
    to {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
@keyframes bounce {
    0%,
    to {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.cursor-pointer {
    cursor: pointer;
}
.flex-col {
    flex-direction: column;
}
.items-end {
    align-items: flex-end;
}
.justify-center {
    justify-content: center;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
}
.overflow-hidden {
    overflow: hidden;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-full {
    border-radius: 9999px;
}
.border-4 {
    border-width: 4px;
}
.border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgba(31, 41, 55, var(--tw-border-opacity));
}
.border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgba(37, 99, 235, var(--tw-border-opacity));
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}
.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
}
.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}
.hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
}
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}
.p-0 {
    padding: 0;
}
.p-2 {
    padding: 0.5rem;
}
.p-0\.5 {
    padding: 0.125rem;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.font-semibold {
    font-weight: 600;
}
.capitalize {
    text-transform: capitalize;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgba(229, 231, 235, var(--tw-text-opacity));
}
.opacity-0 {
    opacity: 0;
}
.group:hover .group-hover\:opacity-20 {
    opacity: 0.2;
}
*,
:after,
:before {
    --tw-shadow: 0 0 #0000;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}
.transition {
    transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform, filter, backdrop-filter,
        -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.duration-200 {
    transition-duration: 0.2s;
}
.duration-300 {
    transition-duration: 0.3s;
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
    <body class=" min-h-screen bg-gray-900 m-6">
        <div class="flex space-x-2 mx-auto max-w-2xl relative">
            <!-- Create Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col group cursor-pointer relative">
                <img class="w-full h-4/5 object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://raw.githubusercontent.com/shibbirweb/public-asset/master/shibbir.jpg" alt="MD. Shibbir Ahmed">
                <div class="bg-gray-800 relative flex-1 flex flex-col">
                    <div class="bg-blue-600 p-0.5 rounded-full border-4 border-gray-800 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                    </div>
                    <div class="flex-1 pb-1 text-white text-sm font-semibold capitalize flex justify-center items-end">
                        <p>
                            Create Story
                        </p>
                    </div>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
            </div>
            <!-- Create Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=1" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-gray-800 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://raw.githubusercontent.com/shibbirweb/public-asset/master/shibbir.jpg" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Your Story</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
    
            </div>
            <!-- Others Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=3" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-blue-600 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300?random=4" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Baky Billah</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
    
            </div>
            <!-- Others Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=5" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-blue-600 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300?random=6" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Mobarak Hossain Joy</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
    
            </div>
            <!-- Others Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=7" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-blue-600 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300?random=8" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Mahmudul Hasan</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
            </div>
            <!-- Others Story End -->
    
            <div class="absolute bg-gray-700 hover:bg-gray-600 transition-colors ease-in-out duration-200 p-2 rounded-full right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
            </div>
        </div>
        <script>
            /**
use this config in tailwind.config.js
module.exports = {
  purge: [
    'index.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      brightness: ["hover", "group-hover"],
      scale: ['group-hover'],
    },
  },
  plugins: [],
};
**/
        </script>
</body>
</html>
  • 18-04-2023, 13:54:53
    #4
    Ramazanyavuz
    Ramazanyavuz
    lancelot adlı üyeden alıntı: mesajı görüntüle
    CSS kodlarını 
    <body>
    etiketinden önce 
    <style> </style>
    tagleri arasına javascript kodlarını 
    </body>
    etiketinden sonra 
    <script></script>
    tagleri arasına alırsanız çalışacaktır.
    serkanhzl adlı üyeden alıntı: mesajı görüntüle 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* This is Generated Tailwind CSS. See current config in JS Part */
/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com*/ /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
html {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
        sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
hr {
    height: 0;
    color: inherit;
}
abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo,
        monospace;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
table {
    text-indent: 0;
    border-color: inherit;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button,
select {
    text-transform: none;
}
button {
    -webkit-appearance: button;
}
legend {
    padding: 0;
}
progress {
    vertical-align: initial;
}
summary {
    display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}
button {
    background-color: initial;
    background-image: none;
}
fieldset,
ol,
ul {
    margin: 0;
    padding: 0;
}
ol,
ul {
    list-style: none;
}
html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5;
}
body {
    font-family: inherit;
    line-height: inherit;
}
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid;
}
hr {
    border-top-width: 1px;
}
img {
    border-style: solid;
}
textarea {
    resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 1;
    color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af;
}
button {
    cursor: pointer;
}
table {
    border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}
a {
    color: inherit;
    text-decoration: inherit;
}
button,
input,
optgroup,
select,
textarea {
    padding: 0;
    line-height: inherit;
    color: inherit;
}
code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        Liberation Mono, Courier New, monospace;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle;
}
img,
video {
    max-width: 100%;
    height: auto;
}
*,
:after,
:before {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.inset-x-3 {
    left: 0.75rem;
    right: 0.75rem;
}
.top-3 {
    top: 0.75rem;
}
.top-1\/2 {
    top: 50%;
}
.right-0 {
    right: 0;
}
.bottom-1 {
    bottom: 0.25rem;
}
.left-2 {
    left: 0.5rem;
}
.left-2\.5 {
    left: 0.625rem;
}
.left-1\/2 {
    left: 50%;
}
.m-6 {
    margin: 1.5rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.box-content {
    box-sizing: initial;
}
.flex {
    display: flex;
}
.table {
    display: table;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-8 {
    height: 2rem;
}
.h-52 {
    height: 13rem;
}
.h-4\/5 {
    height: 80%;
}
.h-full {
    height: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-8 {
    width: 2rem;
}
.w-36 {
    width: 9rem;
}
.w-full {
    width: 100%;
}
.max-w-2xl {
    max-width: 42rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.transform {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x))
        translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))
        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/2 {
    --tw-translate-x: 50%;
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
}
.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
}
@-webkit-keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
@-webkit-keyframes ping {
    75%,
    to {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes ping {
    75%,
    to {
        transform: scale(2);
        opacity: 0;
    }
}
@-webkit-keyframes pulse {
    50% {
        opacity: 0.5;
    }
}
@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}
@-webkit-keyframes bounce {
    0%,
    to {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
@keyframes bounce {
    0%,
    to {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
.cursor-pointer {
    cursor: pointer;
}
.flex-col {
    flex-direction: column;
}
.items-end {
    align-items: flex-end;
}
.justify-center {
    justify-content: center;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
}
.overflow-hidden {
    overflow: hidden;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-full {
    border-radius: 9999px;
}
.border-4 {
    border-width: 4px;
}
.border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgba(31, 41, 55, var(--tw-border-opacity));
}
.border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgba(37, 99, 235, var(--tw-border-opacity));
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}
.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
}
.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
}
.hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
}
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}
.p-0 {
    padding: 0;
}
.p-2 {
    padding: 0.5rem;
}
.p-0\.5 {
    padding: 0.125rem;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.font-semibold {
    font-weight: 600;
}
.capitalize {
    text-transform: capitalize;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgba(229, 231, 235, var(--tw-text-opacity));
}
.opacity-0 {
    opacity: 0;
}
.group:hover .group-hover\:opacity-20 {
    opacity: 0.2;
}
*,
:after,
:before {
    --tw-shadow: 0 0 #0000;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}
.transition {
    transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: background-color, border-color, color, fill, stroke,
        opacity, box-shadow, transform, filter, backdrop-filter,
        -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}
.duration-200 {
    transition-duration: 0.2s;
}
.duration-300 {
    transition-duration: 0.3s;
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
    <body class=" min-h-screen bg-gray-900 m-6">
        <div class="flex space-x-2 mx-auto max-w-2xl relative">
            <!-- Create Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col group cursor-pointer relative">
                <img class="w-full h-4/5 object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://raw.githubusercontent.com/shibbirweb/public-asset/master/shibbir.jpg" alt="MD. Shibbir Ahmed">
                <div class="bg-gray-800 relative flex-1 flex flex-col">
                    <div class="bg-blue-600 p-0.5 rounded-full border-4 border-gray-800 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                    </div>
                    <div class="flex-1 pb-1 text-white text-sm font-semibold capitalize flex justify-center items-end">
                        <p>
                            Create Story
                        </p>
                    </div>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
            </div>
            <!-- Create Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=1" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-gray-800 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://raw.githubusercontent.com/shibbirweb/public-asset/master/shibbir.jpg" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Your Story</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
    
            </div>
            <!-- Others Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=3" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-blue-600 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300?random=4" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Baky Billah</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
    
            </div>
            <!-- Others Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=5" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-blue-600 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300?random=6" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Mobarak Hossain Joy</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
    
            </div>
            <!-- Others Story End -->
    
            <!-- Others Story Start -->
            <div class="w-36 h-52 rounded-xl overflow-hidden flex flex-col relative group cursor-pointer">
                <img class="w-full h-full object-cover transition duration-300 ease-in-out transform group-hover:scale-105" src="https://picsum.photos/200/300?random=7" alt="MD. Shibbir Ahmed">
    
                <div class="w-8 h-8 border-4 box-content border-blue-600 rounded-full overflow-hidden absolute left-2.5 top-3">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300?random=8" alt="MD. Shibbir Ahmed">
                </div>
    
                <div class="absolute inset-x-3 bottom-1">
                    <p class="text-white font-semibold">Mahmudul Hasan</p>
                </div>
    
                <div class="absolute inset-0 bg-black opacity-0 transition duration-300 ease-in-out group-hover:opacity-20"></div>
            </div>
            <!-- Others Story End -->
    
            <div class="absolute bg-gray-700 hover:bg-gray-600 transition-colors ease-in-out duration-200 p-2 rounded-full right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
            </div>
        </div>
        <script>
            /**
use this config in tailwind.config.js
module.exports = {
  purge: [
    'index.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      brightness: ["hover", "group-hover"],
      scale: ['group-hover'],
    },
  },
  plugins: [],
};
**/
        </script>
</body>
</html>
    Çok ama çok teşekkür ederimm ellerinize sağlık.
  • 18-04-2023, 13:55:48
    #5
    arifcan
    arifcan
    CSS kodlarını en üste <style> </style> tagleri arasına,

    JS kodlarını en alta <script> </script> tagleri arasına yapıştırıp kullanabilirsin hocam.