<div class="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md  ">
    <div class="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4  ">
       <h4 class="mr-auto text-xs font-semibold text-white mt-5"><%= title -%></h4>
    </div>
    <div class="group ">
      
      
      <% if(requestType && requestUrl){ %>
         
      <div class="flex h-9 items-center gap-2 border-b-white/7.5 bg-zinc-900 bg-white/2.5 px-4  ">
         <% if( requestType === "GET"){ %>
            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-emerald-500 ">GET</span></div>
          <% } %>  
          <% if( requestType === "POST"){ %>
            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-sky-500 ">POST</span></div>
          <% } %>  
          <% if( requestType === "DELETE"){ %>
            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-red-500 ">DELETE</span></div>
          <% } %> 
          <% if( requestType === "PUT"){ %>
            <div class="dark flex"><span class="font-mono text-sm font-semibold leading-6 text-amber-500 ">PUT</span></div>
          <% } %> 
         <span class="h-0.5 w-0.5 rounded-full bg-zinc-500"></span><span class="font-mono text-sm text-zinc-300"><%= requestUrl -%></span>
      </div>
      
       <% } %>  
       <% if(code){ %>
       <div class="relative">
          <pre class="overflow-x-auto p-4 text-xs text-white"><code class="text-sm"><%= code -%></code></pre>
       </div>
       <% } %>  
    </div>
 </div>