{{-- tab --}}
<style>
.wrapper {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
}

.tabs {
    position: relative;
    margin: 3rem 0;
    background: #056e4f;
    height: 14.75rem;
}

.tabs::before,
.tabs::after {
    content: "";
    display: table;
}

.tabs::after {
    clear: both;
}

.tab {
    float: left;
}

.tab-switch {
    display: none;
}

.tab-label {
    position: relative;
    display: block;
    line-height: 3.50em;
    height: 4em;
    padding: 0 1.618em;
    background: #056e4f;
    border-right: 0.125rem solid #16a085;
    color: #fff;
    cursor: pointer;
    top: 0;
    transition: all 0.25s;
}

.tab-label:hover {
    top: -0.25rem;
    transition: top 0.25s;
}

.tab-content {
    width: 100%;
    height: 83%;
    position: absolute;
    z-index: 1;
    top: 2.75em;
    left: 0;
    padding: 1.618rem;
    background: #fff;
    color: #2c3e50;
    border-bottom: 0.25rem solid #bdc3c7;
    opacity: 0;
    transition: all 0.35s;
}

.tab-switch:checked+.tab-label {
    background: #fff;
    color: #2c3e50;
    border-bottom: 0;
    border-right: 0.125rem solid #fff;
    transition: all 0.35s;
    z-index: 1;
    top: -0.0625rem;
}

.tab-switch:checked+label+.tab-content {
    z-index: 2;
    opacity: 1;
    transition: all 0.35s;
}

</style>

{{-- tab content --}}
@if ($tab_widgets)
<div class="mobile-responsive card-content">
    <div class="wrapper">
        <div class="tabs">

            @foreach($tab_widgets as $row)
            <div class="tab">
                <input type="radio" name="css-tabs" id="{{ $row['slug'] }}" checked class="tab-switch">
                <label for="{{ $row['slug'] }}" class="tab-label">{{ $row['title'] }}</label>
                <div class="tab-content">
                    <p style="text-align:justify;">
                        <img class="rounded" src="{{ url( $row['images_url']) }}" style="margin:0 10px 0 0; float:left;"
                            height="120px">
                        <small>
                            {{ $row['content_text'] }}
                        </small>
                    </p>
                    <button type="button" class="btn-tautan-small btn-tautan shadow mr-1 mb-1">
                        <a href="/article/{{ $row['slug'] }}" style="color: #ffffff;">@lang('widget.TabSelengkapnya')</a>
                    </button>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</div>
{{-- end tab content --}}

@endif
{{-- end tab --}}